CODEWITHSUNDEEP
htmlscrollheightfixed
user3182759
user3182759

Reputation: 1

Make div fixed to top when scroll past 100% height

I've been looking all over on how to fix a div when scrolling past 100% and then for it to sit again when below 100%.

I have been using this jsfiddle to work when i want to sit at a certain pixel height.

Any help would be greatly appreciated.

Alternatively, having the div fix when another div is on visible may work just as well.

Thanks in advance.

Here is the code for jsfiddle.

function fixDiv() {
  var $cache = $('#getFixed'); 
  if ($(window).scrollTop() > 100) 
    $cache.css({'position': 'fixed', 'top': '10px'}); 
  else
    $cache.css({'position': 'relative', 'top': 'auto'});
}
$(window).scroll(fixDiv);
fixDiv();

Upvotes: 0

Views: 534

Answers (1)

Scott Selby
Scott Selby

Reputation: 9570

just position the menu at the top of the screen with fixed positioning :

#myMenu{
   position : fixed;
   top : 10px;
   left : 10px;
}

From your comments I think this is what you are trying to achieve. The way this will act is :

You have a <div> with 100% height, you click a button and the page scrolls down to the next div which is 100% height. Then you cna click to go to the next or the last <div>. Meanwhile the menu is always staying right at the same spot. This is what Fixed positioning means. no matter where you scroll that menu div is always going to stay in the same spot.

Edit

try this if you want the menu to hide while scrolling , then appear again in the same spot.

$(document).scroll(function(){
    $('#myMenu').hide();
});

then you would have to show again , you can find a solution with exact code that works , but that is an idea

Upvotes: 1

Related Questions