admin管理员组

文章数量:1398778

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.

my codes

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

(in my css I have sticky element which is none appear)

JQUERY

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

click to see on codepen

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.

my codes

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

(in my css I have sticky element which is none appear)

JQUERY

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

click to see on codepen

  • javascript
  • jquery
  • html
  • css
Share Improve this question asked Sep 2, 2016 at 19:44 ani_cssani_css 2,1263 gold badges33 silver badges77 bronze badges
Add a ment  | 

5 Answers 5

Reset to default 3

I've solved it by doing this, it appears after you pass the bottom of .b and hides if not:

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

Suggested Solution:

Add this to your jquery code:

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

If I scroll page up to top of my B element my sticky must be hidden

You need to check the scrollTop of the document to see how far you are from the top, then pare that to the scrollTop of the element you are scrolling to (to see if you have reached it)

The reason you should cache your selectors, like I have, is that the onScroll event triggers A LOT. So if you have $('ul.sticky').dosomethign inside of $.scroll(), you are A.) creating that jquery object, B.) querying the DOM C.) doing stuff. 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. 

$(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./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./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();

codepen

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

This should be the proper and correct solution.

Just change the display: none to 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./jquery-2.2.4.js"></script>
	<body>
</html>

本文标签： javascriptWhen scroll page down appear and dissapear elementStack Overflow

版权声明：本文标题：javascript - When scroll page down appear and dissapear element - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744092953a2589762.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。