0

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();
user3182759
  • 1
  • what is the problem ? It seems to be working in my fiddle in chrome – Scott Selby Jul 03 '14 at 15:14
  • Im looking for 100% height, not 100px. – user3182759 Jul 03 '14 at 15:16
  • also you can google "sticky jquery plugin" a lot of other people have made good plugin's for this exact thing , that handle all browsers and a lot of other things that you are not goign to think of right away – Scott Selby Jul 03 '14 at 15:16
  • 1
    I don't understand you want to scroll past 100% ??? – Scott Selby Jul 03 '14 at 15:26
  • Well, i have a single paged website with several divs made to be 100% height of the window. Below the first div there is a second and a third, so when you scroll down to see the ones below, i would like the menu to follow suit. – user3182759 Jul 03 '14 at 15:28
  • what do you mean by follow suit? can you please explain how the menu starts off ex. absolute positioned , fixed, and where on the page . As you scroll - when do you want it to move and where to you want it to move , and after moved what type of positioning would you like ? fixed? or absolute, or relative? Can you just explain where the menu is to start and exactly what you would like to happen as you scroll ( how far you scroll) – Scott Selby Jul 03 '14 at 15:34
  • I have a full height, width div that starts off. At the top is the menu. When you click a link, it smoothly scrolls down to the div/anchor. Underneath the first 100% div the menu is there again, now, when it scrolls past that menu downwards, i'd like it to sticky to the top. – user3182759 Jul 03 '14 at 15:37

1 Answers1

1

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

Scott Selby
  • 9,420
  • 12
  • 57
  • 96
  • Hi, thanks for taking the time to reply so much about this. The only issue with doing this is that ideally i'd like the menu not to travel down over the 1st div. And then it'll pick up the same but separate entry of the menu that is positioned below the 100% mark. I may be explaining myself really badly. – user3182759 Jul 03 '14 at 16:01
  • @user3182759 - edited , if this ends up solving your problem , then accept answer, if not then maybe update question so others can help – Scott Selby Jul 03 '14 at 17:10