堆栈内存溢出
  简体   繁体   English

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

[英]When scroll page down appear and dissapear element

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

问题描述

Whenever I scroll page down to bottom of B element my sticky element (which is the display none; on the top) must be appear and if I scroll page up to top of my B element my sticky must be hidden. 每当我将页面向下滚动到B元素的底部时，都必须显示我的粘性元素（不显示；在顶部），如果将页面向上滚动到B元素的顶部，则我的粘性必须隐藏。

my codes 我的密码

在此处输入图片说明

HTML 的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 的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;
}

(in my css I have sticky element which is none appear) （在我的CSS中，我有粘性元素，但没有出现）

JQUERY JQUERY 

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

click to see on codepen 点击查看codepen

5 个解决方案

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

I've solved it by doing this, it appears after you pass the bottom of .b and hides if not: 我已通过执行此操作解决了该问题，它在您通过.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

Suggested Solution: 建议的解决方案：

Add this to your jquery code: 将此添加到您的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
        }
    });
});

Whenever I scroll page down to bottom of B element my sticky element must appear 每当我将页面向下滚动到B元素的底部时，我的粘性元素都必须出现

在此处输入图片说明

If I scroll page up to top of my B element my sticky must be hidden 如果我将页面向上滚动到B元素的顶部，则必须隐藏我的粘性

在此处输入图片说明

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

You need to check the scrollTop of the document to see how far you are from the top, then compare that to the scrollTop of the element you are scrolling to (to see if you have reached it) 您需要检查文档的scrollTop来查看距顶部的距离，然后将其与要滚动到的元素的scrollTop进行比较（以查看是否已到达）

The reason you should cache your selectors, like I have, is that the onScroll event triggers A LOT. 像我一样，应该缓存选择器的原因是onScroll事件触发了很多。 So if you have $('ul.sticky').dosomethign inside of $.scroll(), you are A.) creating that jquery object, B.) querying the DOM C.) doing stuff. 因此，如果您在$ .scroll（）中包含$（'ul.sticky'）。dosomethign，则您是A.）创建该jquery对象，B。）查询DOM C.）在做事情。 This can get rather expensive for performance. 这可能会使性能变得相当昂贵。 Typically if you are going to do an onScroll event handler, you should add a debounce or throttle to it to limit the number of times the handler function is called. 通常，如果要执行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>

If you want to show the sticky only when you have reached the end of element b, you can do var bToTop = $('.b').height() + $('.b').scrollTop(); 如果仅在到达元素b的末尾时才显示粘性，则可以执行var bToTop = $('.b').height() + $('.b').scrollTop();

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

codepen 码笔 

$(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

This should be the proper and correct solution. 这应该是正确和正确的解决方案。

Just change the display: none to visibility: hidden; 只需更改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在加载时消失并显示在滚动条上 - div to dissapear on load and appear on scroll 在页面顶部时，Javascript&gt; HTML滚动按钮不会消失 - Javascript > HTML scroll button doesn't dissapear when at top of page 悬停时显示图像，不显示时消失 - Make image appear when hovering and dissapear when not 向下滚动页面时，如何使导航栏下方出现阴影？ - How do I make a shadow appear under the navigation bar when I scroll down the page? 向上滚动元素而不是向下滚动页面 - Scroll element up instead of scrolling page down JS-平滑向下滚动到特定元素 - JS - Smooth scroll down page to particular element 向下滚动时，计时器应出现在在线测试页面中 - Timer should appear in the online test page as we scroll down 在滚动时显示元素（向上和向下） - 当页面为 static（不滚动）时隐藏元素 - Show element on scroll (both up and down) - hide element when page is static (not scrolling) 单击元素时向下滚动div - Scroll Down div when click on element 向下滚动页面时更改标题颜色 - Change header color when page scroll down
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM