CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ani_css
ani_css

Reputation: 2126

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

enter image description here

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

(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

Upvotes: 1

Views: 5922

Answers (5)

Yash Jain
Yash Jain

Reputation: 1

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.com/jquery-2.2.4.js"></script>
	<body>
</html>

Upvotes: 0

Rohit Chopra
Rohit Chopra

Reputation: 567

codepen

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

Upvotes: 1

Pat
Pat

Reputation: 2750

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)

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

Upvotes: 1

Jad Chahine
Jad Chahine

Reputation: 7159

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

enter image description here

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

enter image description here

Upvotes: 2

Enmanuel Duran
Enmanuel Duran

Reputation: 5118

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();
        }
    });
});

Upvotes: 3

Related Questions