堆栈内存溢出
  繁体   English   中英

当向下滚动页面时出现并消失元素

[英]When scroll page down appear and dissapear element

 原文  2016-09-02 19:44:53  8   5    javascript/ jquery/ html/ css

问题描述

每当我将页面向下滚动到B元素的底部时，都必须显示我的粘性元素（不显示；在顶部），如果将页面向上滚动到B元素的顶部，则我的粘性必须隐藏。

我的密码

在此处输入图片说明

的HTML 

<html>
    <head>

    </head>
    <body>

        <ul class="sticky">
            <li><a href="#">Home</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Download</a></li>
            <li><a href="#">Forums</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

        <div class="container">
            <div class="a"></div>
            <div class="b"></div>
            <div class="c"></div>
        </div>

    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
    <body>
</html>

的CSS 

.container {
    width:1020px;
    margin:0 auto;
}
.container>div{
        width:100%;
        height:300px;
        background:#f0f0f0;
        border:1px solid #ccc;
        margin:100px 0;
    }
.a:after{
    content:"A";
    font-size:250px;
    text-align:center;
    line-height:300px;
    display:block;
    color:#999;
}
.b:after{
    content:"B";
    font-size:250px;
    text-align:center;
    line-height:300px;
    display:block;
    color:#999;
}
.c:after{
    content:"C";
    font-size:250px;
    text-align:center;
    line-height:300px;
    display:block;
    color:#999;
}
ul.sticky{
    list-style-type:none;
    padding:0;
    margin:0;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:#f0f0f0;
    height:50px;
    border-bottom:5px solid #ccc;
    display:none;
}
ul.sticky:after,ul.sticky:before{
    content:"";
    display:table;
    clear:both;
}
ul.sticky li a{
    display:block;
    float:left;
    line-height:50px;
    padding:0 30px;
    text-decoration:none;
    color:#999;
}
ul.sticky li a:hover{
    background:#999;
    color:#f0f0f0;
}

（在我的CSS中，我有粘性元素，但没有出现）

JQUERY 

$(function() {
    $(window).scroll(function() {
        /* I dont't know what I have to do */
    });
});

点击查看codepen

5 个解决方案

解决方案1
 2 已采纳  2016-09-02 20:08:55

我已通过执行此操作解决了该问题，它在您通过.b底部后显示，并且在未显示时隐藏： 

$(function() {
    $(window).scroll(function() {
        if($(window).scrollTop() > $(".b").offset().top+$(".b").height()){
            $(".sticky").show();
        }else{
            $(".sticky").hide();
        }
    });
});

解决方案2
 2  2016-09-02 20:10:06

建议的解决方案：

将此添加到您的jQuery代码： 

$(function() {
    var targetOffset = $(".b").offset().top; //based on this div, the sticky element should appear
    var $w = $(window).scroll(function(){
        if ( $w.scrollTop() > targetOffset ) {
            $(".sticky").show(); //show the sticky element
        } else {
          $(".sticky").hide();//hide the sticky element
        }
    });
});

每当我将页面向下滚动到B元素的底部时，我的粘性元素都必须出现

在此处输入图片说明

如果我将页面向上滚动到B元素的顶部，则必须隐藏我的粘性

在此处输入图片说明

解决方案3
 1  2016-09-02 20:00:10

您需要检查文档的scrollTop来查看距顶部的距离，然后将其与要滚动到的元素的scrollTop进行比较（以查看是否已到达）

像我一样，应该缓存选择器的原因是onScroll事件触发了很多。 因此，如果您在$ .scroll（）中包含$（'ul.sticky'）。dosomethign，则您是A.）创建该jquery对象，B。）查询DOM C.）在做事情。 这可能会使性能变得相当昂贵。 通常，如果要执行onScroll事件处理程序，则应在其上添加一个反跳或限制，以限制调用处理程序函数的次数。 

 $(function() { var $sticky = $('ul.sticky'); var bToTop = $('.b').scrollTop(); $(window).scroll(function() { if($(document).scrollTop() > bToTop){ $sticky.show(); } else { $sticky.hide(); } }); }); 
 .container { width:1020px; margin:0 auto; } .container>div{ width:100%; height:300px; background:#f0f0f0; border:1px solid #ccc; margin:100px 0; } .a:after{ content:"A"; font-size:250px; text-align:center; line-height:300px; display:block; color:#999; } .b:after{ content:"B"; font-size:250px; text-align:center; line-height:300px; display:block; color:#999; } .c:after{ content:"C"; font-size:250px; text-align:center; line-height:300px; display:block; color:#999; } ul.sticky{ list-style-type:none; padding:0; margin:0; position:fixed; top:0; left:0; width:100%; background:#f0f0f0; height:50px; border-bottom:5px solid #ccc; display:none; } ul.sticky:after,ul.sticky:before{ content:""; display:table; clear:both; } ul.sticky li a{ display:block; float:left; line-height:50px; padding:0 30px; text-decoration:none; color:#999; } ul.sticky li a:hover{ background:#999; color:#f0f0f0; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> </head> <body> <ul class="sticky"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Download</a></li> <li><a href="#">Forums</a></li> <li><a href="#">Contact</a></li> </ul> <div class="container"> <div class="a"></div> <div class="b"></div> <div class="c"></div> </div> <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <body> </html>

如果仅在到达元素b的末尾时才显示粘性，则可以执行var bToTop = $('.b').height() + $('.b').scrollTop();

解决方案4
 1  2016-09-02 20:46:05

码笔 

$(document).on("scroll", function() {
   if ($(document).scrollTop() >= 600) {
     $("ul").css({"display":"initial"});
   } 
    if($(document).scrollTop() <=600) {
     $("ul").css({"display":"none"});
   }
 });

解决方案5
 0  2016-09-02 20:17:03

这应该是正确和正确的解决方案。

只需更改display: none visibility: hidden; 。 

 $(function() { $(window).scroll(function() { if ($(window).scrollTop() > $(".a").offset().top + $(".a").height()) { $(".sticky").css({ "visibility": "visible" }); } else { $(".sticky").css({ "visibility": "hidden" }); } }); }); 
 .container { width:1020px; margin:0 auto; } .container>div{ width:100%; height:300px; background:#f0f0f0; border:1px solid #ccc; margin:100px 0; } .a:after{ content:"A"; font-size:250px; text-align:center; line-height:300px; display:block; color:#999; } .b:after{ content:"B"; font-size:250px; text-align:center; line-height:300px; display:block; color:#999; } .c:after{ content:"C"; font-size:250px; text-align:center; line-height:300px; display:block; color:#999; } ul.sticky{ list-style-type:none; padding:0; margin:0; position:fixed; top:0; left:0; width:100%; background:#f0f0f0; height:50px; border-bottom:5px solid #ccc; visibility: hidden; } ul.sticky:after,ul.sticky:before{ content:""; display:table; clear:both; } ul.sticky li a{ display:block; float:left; line-height:50px; padding:0 30px; text-decoration:none; color:#999; } ul.sticky li a:hover{ background:#999; color:#f0f0f0; } .show{ display:block; } 
 <html> <head> </head> <body> <ul class="sticky"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Download</a></li> <li><a href="#">Forums</a></li> <li><a href="#">Contact</a></li> </ul> <div class="container"> <div class="a"></div> <div class="b"></div> <div class="c"></div> </div> <script src="https://code.jquery.com/jquery-2.2.4.js"></script> <body> </html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 div在加载时消失并显示在滚动条上 在页面顶部时，Javascript&gt; HTML滚动按钮不会消失 悬停时显示图像，不显示时消失 向下滚动页面时，如何使导航栏下方出现阴影？ 向上滚动元素而不是向下滚动页面 JS-平滑向下滚动到特定元素 向下滚动时，计时器应出现在在线测试页面中 在滚动时显示元素（向上和向下） - 当页面为 static（不滚动）时隐藏元素 单击元素时向下滚动div 向下滚动页面时更改标题颜色
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM