How do I code JQuery so that when I scroll to a certain element, Nav bar appears at top, when I scroll back up past that element, nav bar disappears

Question

I have a div called #menu which I want to display when I scroll past the element #section3, if I scroll up past that element again, I want #menu to disappear

How would I code this?

Welcome to Stack Overflow. Have you tried anything yourself? You're much more likely to get effective help if you have a specific problem you're running into, rather than asking Stack Overflow to serve as a code writing service. Please read up on [how to ask](http://stackoverflow.com/help/how-to-ask) in the [help center](http://stackoverflow.com/help) for more information. Happy asking! — Brandon Anzaldi, Jun 14 '16 at 00:45
https://stackoverflow.com/questions/23487573/how-to-implement-auto-fixing-a-div-like-https-www-yahoo-com — coderz, Jun 14 '16 at 03:13

score 1 · Answer 1 · edited May 23 '17 at 12:31

Maybe something like this?

scrolled = "no"
$(window).scroll(function(){
scr = $("body").scrollTop();
if (scr > 100 && scrolled == "no"){
$("#menu").css({"display:block"})
displayed = "yes"
}
if (displayed == "yes" && scrolled = "yes"){
$("#menu").css({"display:none"})
}
});

The above assumes that #section3 is 100 pixels down the page. If you do not know where its going to be on the page then you could use the method outlined here: Trigger event when user scroll to specific element - with jQuery

Bmd · Answer 2 · 2016-06-14T02:46:09.560

With jQuery you can get the scroll position with $("body").scrollTop();.

Expanding on what @Ned Hulton said, I recommend comparing the scroll position to the top of a "container element" (or 'row') in your page like this:

if ($('body').scrollTop() > $('#someRow').offset().top){
    //do something
}

That way you can account for your container appearing at a variable distance down the page (which will come in handy for mobile browsing or cases where your text wraps to additional lines)

score 0 · Answer 3 · answered Jun 14 '16 at 02:58

I just whipped this up in jsfiddle

https://jsfiddle.net/rb56j0yu/

it uses jQuery, and checks the scroll position against the target div. Css sets the menu as position: fixed, and defaults to hidden.

$(window).scroll(function(){
     var yPos = $("body").scrollTop();
   var yCheck = $("#c3").position().top;
   if (yPos > yCheck && !$("#menu").is(":visible")) 
   {
        $("#menu").show();
   }
   if (yPos <= yCheck && $("#menu").is(":visible")) 
   {
        $("#menu").hide();
   }
    });

score 0 · Answer 4 · answered Jun 14 '16 at 03:06

First, get your #section3 top offset and height. Which will be used as the threshold whether #section3 is actually on the window screen.

var top = $('#section3').offset().top;
var bot = topOffset + $('#section3').height();

Then, detect it on your scroll event.

$(window).on('scroll', function () {
   var scrollTop = $(window).scrollTop();
   if (scrollTop >= top && scrollTop <= bot) {
      // #section3 is within the screen.
      $('#menu').show();
   }
   else {
      // #section3 is out of screen.
      $('#menu').hide();
   }
});

score 0 · Answer 5 · answered Jun 14 '16 at 03:13

This is a common use case, I wrote following code:

// what does "Auto Header" mean, goto https://www.yahoo.com/
// scroll down and you will see the purple part auto fixed to top,
// while when scroll up, it restores and does not be fixed.
// 1. multiple auto header elements handled
// 2. dynamically create/remove elements issue handled
// 3. no unnecessary dom operation, high performance
// usage: just add 'class="auto-header"' to any element you want to auto header
// suggest set each auto-header element specific width and height
// do not guarantee it works when resize or scroll left/right
$(document).ready(function() {
  var rawTops = [],
    rawLefts = [],
    rawStyles = [],
    $locations = [], // record next sibling so that element easily find where to restore
    fixed = []; // mark whether this element is fixed

  $(".auto-header").each(function() {
    var $this = $(this),
      offset = $this.offset();
    rawTops.push(offset.top);
    rawLefts.push(offset.left);
    rawStyles.push($this.attr("style"));
    $locations.push($this.siblings().eq($this.index()));
    fixed.push(false);
  });

  $(window).on("scroll", function() {
    $(".auto-header").each(function(i, e) {
      if(!fixed[i] && $(window).scrollTop() > rawTops[i]) {
        var $te = $(this).clone(true);
        $(this).remove();
        $locations[i].before($te);
        $te.css({
          "position": "fixed",
          "top": 0,
          "left": rawLefts[i],
          "z-index": 100
        });
        fixed[i] = true;
      } else if(fixed[i] && $(window).scrollTop() < rawTops[i]) {
        $(this).removeAttr("style").attr("style", rawStyles[i]);
        fixed[i] = false;
      }
    });
  });
});

How do I code JQuery so that when I scroll to a certain element, Nav bar appears at top, when I scroll back up past that element, nav bar disappears

5 Answers5