页面顶部的子菜单fadeIn和最后的fadeOut答案

【问题标题】：Sub-menu fadeIn at the top of the page and fadeOut at the end页面顶部的子菜单fadeIn和最后的fadeOut
【发布时间】：2016-09-10 00:10:52
【问题描述】：

我有一个子菜单，如果滚动 150 像素，它会在页面顶部淡入。如果你高于 150px 它会淡出。

这很好用。现在我也想要在侧面末尾的子菜单 FadeOut。喜欢：在顶部的 150 像素和页面结束前的 150 像素之间淡入。在此区域之外：FadeOut。

这是我的 jQuery 代码：

function scrollSide($) {

if ($(window).width() >= 768) {
    /*menu scroll*/

    $(window).scroll(function () {
        var scroll = $(window).scrollTop();

        if (scroll >= 150) {

            $("#navbar-example").fadeIn("easing");
            $(".sidemenu").css("top", "92px");

        } else {
            $(".sidemenu").css("top", "170px");
            $("#navbar-example").fadeOut("easing");

        }
    });
   } 
}

对于页面顶部和页面末尾之间的情况，我需要一个 if 语句。非常感谢！

【问题讨论】：

这可能会有所帮助stackoverflow.com/q/3898130/2887133
是的，我找到了那个帖子……但我没有找到一个好的解决方案来使用它。如果您向下滚动，子菜单会闪烁，因为功能不够清晰。

标签： jquery html css

【解决方案1】：

您需要在if 语句中添加另一个条件，检查用户是否滚动到底部。

基于这个问题：

Check if a user has scrolled to the bottom

你可以这样做：

$(window).scroll(function(){
    var st = $(window).scrollTop(),
        wh = $(window).height(),
      dh = $(document).height();
  if(st >= 150 && st+wh <= dh-150){
    $('yourdiv').fadeIn();
  } else {
    $('yourdiv').fadeOut();
  }
})

FIDDLE DEMO

【讨论】：

谢谢！这正是我需要的！效果很好！

【解决方案2】：

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
       $(window).unbind('scroll');
       alert("near bottom!");
   }
});

注意：- 应该将 $(window).height() 更改为 window.innerHeight，因为当地址栏隐藏时，窗口的高度会增加 60px，但使用 $(window).height() 不会反映这种变化，而使用 window.innerHeight 确实如此。

【讨论】：