Elxis CMS Forum

Support => General => Topic started by: armpouniotis on November 18, 2014, 19:59:56

Title: How to make a fixed menu when scrolling down ?
Post by: armpouniotis on November 18, 2014, 19:59:56

Hi there !

it is possible to make a fixed menu when scrolling down the page ?

I see that in many websites, I tried some codes that I found, but none of them is working....

Any help would be greatful !

Christos

Title: Re: How to make a fixed menu when scrolling down ?
Post by: Ivan Trebješanin on November 18, 2014, 20:36:08

Here's what I did yesterday:

position: fixed;
left: 0;
right: 0;
top: 0;

Example:
http://www.architerra.rs/

Title: Re: How to make a fixed menu when scrolling down ?
Post by: armpouniotis on November 18, 2014, 21:12:34

Thank you very much for your quick answer Ivan !

your solution works great !

how about if my menu is not at the top before scrolling down, but anywhere else in the page ???

Christos

Title: Re: How to make a fixed menu when scrolling down ?
Post by: Ivan Trebješanin on November 18, 2014, 22:19:41

In that case, you need some javascript. Put something like this just before </body> tag

Code: [Select]

<script type="text/javascript">
$(document).ready(function(){
  $('.topbar a, .fixedbar a').on('click', function(e) {
    e.preventDefault();
  });
 
  $(window).on('scroll',function() {
    var scrolltop = $(this).scrollTop();

    if(scrolltop >= 125) {
      $('#fixedbar').fadeIn(250);
    }
   
    else if(scrolltop <= 120) {
      $('#fixedbar').fadeOut(250);
    }
  });
});
</script>
HTML as follows:

Code: [Select]

<nav id="fixedbar">
    <div id="fixednav">
       some navigation here
    </div>
 </nav>


Title: Re: How to make a fixed menu when scrolling down ?
Post by: armpouniotis on November 18, 2014, 23:27:57

Thank you very much for this code !

I will try it and then I will let you know !

Lots of thanx !

Christos