How to Hide Div When You Scroll to Bottom and Show It Again When Scroll Up to Top

How to hide div when you scroll to bottom and show it again when scroll up to top?

Simply add an else case that display it:

if (window.innerHeight + window.scrollY > document.body.clientHeight) {
document.getElementById("scroller").style.display='none';
}
else{
document.getElementById("scroller").style.display='block';
}

How to hide div when scrolling down and then show scroll up

You might be looking for something like this? Whenever you scroll, it checks how far you've scrolled and in what direction from your previous scroll position.

var previousScroll = 0;
$(window).scroll(function(event){
var scroll = $(this).scrollTop();
if (scroll > previousScroll){
// downscroll code
} else {
// upscroll code
}
previousScroll = scroll;
});

Here's a little complimentary JSFuddle with some modification and live action application of that script: https://jsfiddle.net/d00h1zmn/4/

How to hide div when scrolling down and then show it as you scroll up?

You can try headroom.js which is a tiny little javascript plugin to do the trick.

Show and hiding div after scroll point

$(document).ready( function() {
$("#dvid").hide(); //hide your div initially
var topOfOthDiv = $("#othdiv").offset().top;
$(window).scroll(function() {
if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
$("#dvid").show(); //reached the desired point -- show div
}
else{
$("#dvid").hide(); //else above the desired point -- hide div
}
});
});

Hide div when user reaches the bottom of page

HTML

<div id="nav"></div> 

JS

document.onscroll = function() {
if (window.innerHeight + window.scrollY > document.body.clientHeight) {
document.getElementById('nav').style.display='none';
}
}

Fiddle: https://jsfiddle.net/k77fdzyu/1/

Hide div after scroll

Use offset().top to get element top, then use a statement to compare window scrollTop and element offset top.

$(document).ready(function() {
var elTop = $('.about').offset().top; // get element top
$('.about').hide(); $('.link2about').on('click', function(e) { e.preventDefault(); $('.about').show(); $('html, body').animate({ scrollTop: $('.about').offset().top }, 1000, 'swing'); return false; }); $(window).scroll(function() {
if ($(window).scrollTop() > elTop) { // If window scroll top greater than element top $('.about').hide(); }
});});
.link2about {  color: red;}
body { height: 2000px;}
.about { color: blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="link2about"> about </div><div class="posts">  body content here body content here body content here body content here body content here body content here body content here body content here body content here body content here body content here body content here</div><div class="about">  about content here about content here about content here about content here about content here about content here</div>

Show 'back to top' when scrolling down 100px from the section

I developed a solution using getPosition() method developed by @ShawnWhinnery. Also, I assigned a fixed value to the position style inside the .back-to-top class style. If you want to hide the <button> when the end of the <section> element is reached, you can follow the same logic; in this case, just calculate the height of the <section> element.

$(document).ready(function() {
$('.back-to-top').hide();

function getPosition(element) {
var xPosition = 0, yPosition = 0;

while(element) {
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}

$(window).scroll(function() {
let staticPosition = getPosition(document.getElementById('images')).y;

console.clear();
console.log(`Dif: ${this.scrollY - staticPosition} Scroll: ${this.scrollY} Element: ${staticPosition}`);

if (this.scrollY - staticPosition > 100)
$('.back-to-top').show().fadeIn();
else
$('.back-to-top').fadeOut().hide();
});
});
#images div {
width: 100%;
height: 300px;
background: #d35276;
}
#images div:nth-child(odd) {
background: #f1e264;
}
.back-to-top {
position: fixed; /* edited */
padding: 20px;
display: inline-block;
text-decoration: none;
background-color: #FFF;
color: #000;
border-radius: 50px;
right: 50px;
bottom: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="top"></div>

<section id="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis blandit enim ut leo pulvinar, ut viverra felis pharetra. Donec tincidunt orci sit amet consequat porttitor. Pellentesque vitae varius risus. Quisque iaculis vel purus vitae euismod. Pellentesque
tincidunt justo eu nibh euismod fringilla. Integer iaculis tellus eget egestas faucibus. Aliquam at mi non leo luctus sodales ac eu ipsum. Curabitur id leo risus. Sed porttitor nec tellus non volutpat. Phasellus nec ornare ante, nec sodales quam.
Donec a lectus semper, viverra metus eget, consectetur odio. Nulla scelerisque elit a arcu consequat lobortis. Donec non ipsum felis. Maecenas sem dolor, egestas a placerat fermentum, finibus vel mi. Etiam pretium orci eu nunc elementum, id rutrum
tellus convallis.</p>
</section>

<section id="images">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>

<a href="#top" class="back-to-top">↑</a>

Show div after scroll and hide div at the end of the page

You could do something like this:

var y = $(this).scrollTop();

if (y > 1500 && y < ($(document).height() * 0.9)) {
$('#sample').fadeIn();
} else {
$('#sample').fadeOut();
}


Related Topics



Leave a reply



Submit