Question

我有一个名为#menu的div，当我滚动浏览元素#section3时，我希望显示该div，如果我再次向上滚动该元素，我希望#menu消失

我该怎么编码？

Answer 1

也许是这样的？

  contents = dict(digit_count.items())
  print(contents)

以上假设＃section3在页面下方100像素。如果您不知道它在页面上的位置，那么您可以使用此处概述的方法： Trigger event when user scroll to specific element - with jQuery

Answer 2

使用jQuery，您可以使用$("body").scrollTop();获取滚动位置。

扩展@Ned Hulton所说的内容，我建议将滚动位置与页面中“容器元素”（或“行”）的顶部进行比较，如下所示：

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

通过这种方式，您可以将容器放在页面下方可变距离处显示（这对于移动浏览或文本包装到其他行的情况会很方便）

Answer 3

我刚刚在jsfiddle

中鞭打了这个

https://jsfiddle.net/rb56j0yu/

它使用jQuery，并检查滚动位置与目标div。 Css将菜单设置为position：fixed，默认为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();
   }
    });

Answer 4

首先，获取#section3顶部偏移量和高度。这将被用作阈值，#section3实际上是否在窗口屏幕上。

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

然后，在scroll事件中检测到它。

$(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();
   }
});

Answer 5

这是一个常见的用例，我写了以下代码：

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

我如何编写JQuery代码，以便当我滚动到某个元素时，导航栏出现在顶部，当我向上滚动回到该元素时，导航栏消失

5 个答案: