CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Adrian
Adrian

Reputation: 523

jQuery window scroll, on scoll down goes back up

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?

Upvotes: 1

Views: 1579

Answers (3)

Veer
Veer

Reputation: 6936

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;
}

Upvotes: 1

Karl-Andr&#233; Gagnon
Karl-Andr&#233; Gagnon

Reputation: 33880

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.

Upvotes: 1

jack blank
jack blank

Reputation: 5195

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>

Upvotes: 0

Related Questions