javascript - When scroll page down appear and dissapear element

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

Share Improve this question asked Sep 2, 2016 at 19:44 ani_css 2,1263 gold badges33 silver badges77 bronze badges

Add a ment |

5 Answers 5

Sorted by: 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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - When scroll page down appear and dissapear element - Stack Overflow

5 Answers 5

Suggested Solution:

与本文相关的文章

评论列表(0)