1

Using jQuery scroll function to create a sticky header and sometimes on a specific height (i guess) when I scroll down, goes back to top of page.

Recorded this: http://take.ms/s9mGh8

This is my function:

$(window).scroll(function(e){
    $('#main').toggleClass('fixed', $(this).scrollTop() > $('#header').height()+25);
});

How can I fix this?

Adrian
  • 491
  • 6
  • 23

3 Answers3

1

You can try below code

HTML

<div id="main">
  <div id="header"></div>
  <div id="content"></div>
</div>

JS 

$(window).scroll(function(){
if ($(window).scrollTop() >= 2) {
   $('#header').addClass('fixed');
   $("#content").css({"margin-top": $('#header').outerHeight() +"px"});
}else {
   $('#header').removeClass('fixed');
    $("#content").css({"margin-top":"0px"});
}
});

css

#header{
  height : 90px;
  background-color : grey;
  width : 100%;
 }
.fixed{
 position: fixed;
 top:0; left:0;
 width: 100%;  
 z-index: 9999;  
}

#content{
  height : 105vh;
}
Veer
  • 6,046
  • 1
  • 14
  • 12
  • in this updated code it wont flick page, its smooth effect. just check once. – Veer Oct 27 '16 at 05:07
  • this is better, but I had multiple fixed elements, and @Karl-André Gagnon gave me the right fix. thanks! – Adrian Oct 27 '16 at 09:07
1

The problem is that fixed elements doesn't take space in the DOM. So what happening here is that your header take space, you scroll the page, set the header with position:fixed so it doesn't take space anymore, all your elements move up and the scrollbar disappear.

To prevent that behavior, you need to add the "missing height" to the document when changing the class. A commun technique, used by StickyKit for example, if to add a placeholder div.

You can see a basic code here : https://jsfiddle.net/jaL765t1/

var flag = false;
$(window).scroll(function(e){
  var passed_point = $(this).scrollTop() > $('#header').height()+25;

  if(passed_point && !flag){
    var surrogate = $('<div>', {
        'class' : 'js-surrogate',
        css : {
        height : $('#header').height()
      }
    });
    $('#header').before( surrogate );
    $('#main').addClass('fixed');

    flag=true;
  }else if(!passed_point && flag){
    $('#main').removeClass('fixed');
    $('#header').prev('.js-surrogate').remove();
    flag=false;
  }  
});

Of course, this code is not good, but you can easily use it as a starting point.

Karl-André Gagnon
  • 33,662
  • 5
  • 50
  • 75
0

I think you're trying to do something like this.

If you want the header to be fixed why put the class on main?

$(function(){
  $(window).scroll(function(e){
    //console.log($(this).scrollTop() > $("#header").height())
     //^--console.log() for testing the Boolean 
      $("#header").toggleClass("fixed", $(this).scrollTop() > $("#header").height() )
  })
})
*{
  margin: 0;
  padding: 0;
}
#header{
  height:90px;
  background: purple;
}
.fixed{
  position: fixed;
  top:0;
  left: 0;
  right: 0;
}
.content{
  height: 4000px;
  background: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div id="header">
  Header
</div>
<div class="content">
  content
</div>
jack blank
  • 5,073
  • 7
  • 41
  • 73
  • I have 4-5 fixed items on page, this is why I'm adding fixed to main – Adrian Oct 26 '16 at 17:58
  • 1
    well do you need to add the class to `main` or the `header`? I thought you had problems getting the sticky header set up (I thought that was the issue in the video)so that is what I showed you. I don't know what your `main` element looks like. did I help you? I like the way you use toggle class – jack blank Oct 26 '16 at 18:03
  • there is any condition to get how much you still have to scroll? my function is ok when i dusplay 20 products on page, but when i have only 10 =~window height, than i have just a small scrolling area and i think this is the problem – Adrian Oct 26 '16 at 18:04
  • If you just have 10 items and you can't scroll the scroll event won't get triggered. It will only get triggered while scrolling. `there is any condition to get how much you still have to scroll?` maybe you want to get the height of the page and subtract the bottom of your elements. http://stackoverflow.com/a/1147711/1893672. – jack blank Oct 26 '16 at 18:09
  • I need one more condition, thinking how to calculate it :) document.height - some elements. Now is triggering twice, can't understand why. First is ok, second is removing the class and moving to top – Adrian Oct 26 '16 at 18:14