Question

每当我向下滚动页面到B元素的底部时，我的粘性元素（显示为无;在顶部）必须出现，如果我向上滚动页面到我的B元素的顶部，我的粘性必须被隐藏。

我的代码

HTML

batch_step_execution

CSS

<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中我有粘性元素，没有出现）

JQUERY

.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;
}

click to see on codepen

Answer 1

我通过这样做解决了它，它在你通过.b的底部后显示，如果没有则隐藏：

C:\Users\dinesh_pundkar\Desktop>python c.py
Line has 0
110.0000        3       0

Answer 2

建议的解决方案：

将此添加到您的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元素顶部，我的粘性必须隐藏

Answer 3

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

你应该像我一样缓存选择器的原因是onScroll事件触发A LOT。因此，如果你在$ .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();

Answer 4

codepen

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

Answer 5

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

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

＆＃13;

$(function() {
	$(window).scroll(function() {
		if ($(window).scrollTop() > $(".a").offset().top + $(".a").height()) {
			$(".sticky").css({
				"visibility": "visible"
			});
		} else {
			$(".sticky").css({
				"visibility": "hidden"
			});
		}
	});
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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

5 个答案:

建议的解决方案：