logo标签列表

在滚动到800像素后显示div

jqueryhtmlcss
86

当滚动距离达到页面顶部800像素时，我想显示一个隐藏的div。目前我有这个示例，但我想它需要修改才能实现我想要的效果。

编辑:

当向上滚动且高度小于800像素时，此div应该隐藏。

HTML：

<div class="bottomMenu">
  <!-- content -->
</div>

层叠样式表：

.bottomMenu {
    width: 100%;
    height: 60px;
    border-top: 1px solid #000;
    position: fixed;
    bottom: 0px;
    z-index: 100;
    opacity: 0;
}

jQuery：

$(document).ready(function() {
    $(window).scroll( function(){
        $('.bottomMenu').each( function(i){
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            if( bottom_of_window > bottom_of_object ){
                $(this).animate({'opacity':'1'},500);
            }
        }); 
    });
});

这里是我目前代码的Fiddle。

你试过这样做吗？你只需要确定是否向下滑动了超过800像素，然后显示一个div。 - Steven
是的我尝试了！但如何确定呢？ - AndrewS
4个回答
246
如果您想在滚动一定像素后显示一个div： 工作示例 
$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});


$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});
body {
  height: 1600px;
}
.bottomMenu {
  display: none;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  border-top: 1px solid #000;
  background: red;
  z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Scroll down... </p>
<div class="bottomMenu"></div>

这很简单，但很有效。

.scroll()的文档
.scrollTop()的文档

如果你想在滚动一定数量的像素后显示一个div，
不使用jQuery：
工作示例 
myID = document.getElementById("myID");

var myScrollFunc = function() {
  var y = window.scrollY;
  if (y >= 800) {
    myID.className = "bottomMenu show"
  } else {
    myID.className = "bottomMenu hide"
  }
};

window.addEventListener("scroll", myScrollFunc);


myID = document.getElementById("myID");

var myScrollFunc = function() {
  var y = window.scrollY;
  if (y >= 800) {
    myID.className = "bottomMenu show"
  } else {
    myID.className = "bottomMenu hide"
  }
};

window.addEventListener("scroll", myScrollFunc);
body {
  height: 2000px;
}
.bottomMenu {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  border-top: 1px solid #000;
  background: red;
  z-index: 1;
  transition: all 1s;
}
.hide {
  opacity: 0;
  left: -100%;
}
.show {
  opacity: 1;
  left: 0;
}
<div id="myID" class="bottomMenu hide"></div>

.scrollY的文档
.className的文档
.addEventListener的文档

如果你想在滚动到某个元素后显示它： 工作示例 
$('h1').each(function () {
    var y = $(document).scrollTop();
    var t = $(this).parent().offset().top;
    if (y > t) {
        $(this).fadeIn();
    } else {
        $(this).fadeOut();
    }
});


$(document).scroll(function() {
  //Show element after user scrolls 800px
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }

  // Show element after user scrolls past 
  // the top edge of its parent 
  $('h1').each(function() {
    var t = $(this).parent().offset().top;
    if (y > t) {
      $(this).fadeIn();
    } else {
      $(this).fadeOut();
    }
  });
});
body {
  height: 1600px;
}
.bottomMenu {
  display: none;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  border-top: 1px solid #000;
  background: red;
  z-index: 1;
}
.scrollPast {
  width: 100%;
  height: 150px;
  background: blue;
  position: relative;
  top: 50px;
  margin: 20px 0;
}
h1 {
  display: none;
  position: absolute;
  bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Scroll Down...</p>
<div class="scrollPast">
  <h1>I fade in when you scroll to my parent</h1>

</div>
<div class="scrollPast">
  <h1>I fade in when you scroll to my parent</h1>

</div>
<div class="scrollPast">
  <h1>I fade in when you scroll to my parent</h1>

</div>
<div class="bottomMenu">I fade in when you scroll past 800px</div>

注意，您无法获取设置为display: none;的元素的偏移量，请改为获取元素的父级偏移量。

.each()的文档
.parent()的文档
.offset()的文档

如果您想要一个导航栏或div在滚动到它时粘在页面顶部，并在向上滚动时取消粘附： 工作示例 
$(document).scroll(function () {
    //stick nav to top of page
    var y = $(this).scrollTop();
    var navWrap = $('#navWrap').offset().top;
    if (y > navWrap) {
        $('nav').addClass('sticky');
    } else {
        $('nav').removeClass('sticky');
    }
});

#navWrap {
    height:70px
}
nav {
    height: 70px;
    background:gray;
}
.sticky {
    position: fixed;
    top:0;
}


$(document).scroll(function () {
    //stick nav to top of page
    var y = $(this).scrollTop();
    var navWrap = $('#navWrap').offset().top;
    if (y > navWrap) {
        $('nav').addClass('sticky');
    } else {
        $('nav').removeClass('sticky');
    }
});
body {
    height:1600px;
    margin:0;
}
#navWrap {
    height:70px
}
nav {
    height: 70px;
    background:gray;
}
.sticky {
    position: fixed;
    top:0;
}
h1 {
    margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas,
  imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum
  oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>
<div id="navWrap">
  <nav>
    <h1>I stick to the top when you scroll down and unstick when you scroll up to my original position</h1>

  </nav>
</div>
<p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De carne lumbering animata corpora quaeritis. Summus brains sit, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas,
  imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. Zonbi tattered for solum
  oculi eorum defunctis go lum cerebro. Nescio brains an Undead zombies. Sicut malus putrid voodoo horror. Nigh tofth eliv ingdead.</p>

1
有没有办法以百分比指定 y 值？ - red security
1
这很棒，谢谢，非常有用。我的唯一评论是它没有涵盖用户返回页面或刷新页面并已经到达页面的特定位置的情况。它只在滚动时起作用。需要在页面加载时检查位置以使其完整。此外，反复向上和向下滚动到断点周围会触发大量淡入淡出效果，所有效果都将堆叠起来。任何现有的淡入淡出效果都应该被新的效果取消。 - user2493235
1
抱歉，只是有一个评论，为什么要将scrollTop的值存储在变量中以仅访问一次？它可以直接进行检查。该行可以被替换为调用stop()来解决上述第二个问题，并保持代码行数不变，至少对于jQuery版本而言。 - user2493235
能否在滚动时仅显示元素一次，并且不再随着滚动而隐藏？ - user21728832
9

您有几个问题。首先，为什么要使用类？您在页面上实际上有多个这样的元素吗？CSS表明您不能这样做。如果没有，您应该使用ID-在CSS和jQuery中选择速度更快：

<div id=bottomMenu>You read it all.</div>

其次，你在CSS中使用了一些奇怪的东西 - 特别是z-index应该只是一个数字，不是以像素为度量。它指定了此标记所在的层，其中每个更高的数字都更接近用户（或换句话说，位于具有较低z-indexes的标记之上/遮盖）。

你试图做的动画基本上是.fadeIn()，所以初始将div设置为display:none;，然后使用.fadeIn()进行动画：

$('#bottomMenu').fadeIn(2000);

.fadeIn()的工作原理是首先执行display:（标签的正确显示属性），opacity: 0，然后逐渐增加不透明度。

完整的工作示例：

http://jsfiddle.net/b9chris/sMyfT/

CSS：

#bottomMenu {
    display: none;
    position: fixed;
    left: 0; bottom: 0;
    width: 100%; height: 60px;
    border-top: 1px solid #000;
    background: #fff;
    z-index: 1;
}

JS:

var $win = $(window);

function checkScroll() {
    if ($win.scrollTop() > 100) {
        $win.off('scroll', checkScroll);
        $('#bottomMenu').fadeIn(2000);
    }
}

$win.scroll(checkScroll);
2
你也可以这样做。
$(window).on("scroll", function () {
   if ($(this).scrollTop() > 800) {
      #code here
   } else {
      #code here
   }
});
1

滚动条和 $(window).scrollTop()

我发现，调用像上面提供的解决方案中的功能（这个论坛中有很多类似的例子-它们都可以正常工作），只有当滚动条实际可见并正在操作时才成功。

如果你想要实现这样的功能，并且你还想要实现一个极简主义的“清屏”而没有滚动条，例如在这个讨论，那么$(window).scrollTop()将不起作用。

虽然这可能是一个编程基本原则，但我想向任何新手提供帮助，因为我花了很长时间弄清楚这一点。

如果有人能够提供一些如何克服这个问题或更深入的见解的建议，请随意回复，因为我不得不在这里使用onmouseover / mouseleave的show / hide代替 这里。

长命百岁，程序员！CollyG。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接