Show and hiding div after scroll point - javascript

I am using this script to hide a div and show it when have scrolled past a certain point in the page. This is working fine, but when I scroll back up to the top, the div then stays visible. Could anyone help me with an amendment I can make to the code to hide the div again when scrolling back above the desired point?
Thanks, T
$(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
}
});
});

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

$(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").show(); //hide div
}
});
});

First, check the element visibility:
var rect = element.getBoundingClientRect();
var visible = Boolean(
rect.top >= 0
&& rect.left >= 0
&& rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
&& rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
Then bind event to revalidate visibility:
jQuery(window).bind('DOMContentLoaded load resize scroll', fn);
// fn - is your function to show/hide elements in accordance with previous statement
So, the final code would be:
$(document).ready( function() {
var checkVisibility = function () {
$("#dvid, #othdiv").each(function () {
var rect = this.getBoundingClientRect(),
visible = Boolean(
rect.top >= 0
&& rect.left >= 0
&& rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
&& rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
$(this)[visible ? 'show' : 'hide']();
});
};
//hide your divs initially
$("#dvid, #othdiv").hide();
jQuery(window).bind('DOMContentLoaded load resize scroll', checkVisibility);
});

Related

Scoll to top on click

I try to scroll to top of sticky tab navigation and it seems that the function runs on pageload, not only on click. I get a unwanted flicker and a scroll to bottom on page load. What could be wrong with my code?
jQuery('ul.wc-tabs li a').click(function() {
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
if ( parseInt( width ) <= 768 ) {
jQuery('ul.wc-tabs li').removeClass('active');
jQuery(this).parent('li').addClass('active');
$("html, body").animate({scrollTop: $(".woocommerce-tabs").offset().top}, 1000);
return;
}
} );
I found the issue. WooCommerce "clicks" the event on pageload by itself.
Working code (except for the first tab):
jQuery('ul.wc-tabs li:not(:first-child) a').click(function() {
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
if ( parseInt( width ) <= 768 ) {
jQuery('ul.wc-tabs li').removeClass('active');
jQuery(this).parent('li').addClass('active');
$("html, body").animate({scrollTop: $(".woocommerce-tabs").offset().top}, 100);
return;
}
} );

Sticky remove on mobile screen

I have done topbar sticky on desktop view with the help of Jquery but I don't want a sticky top bar on a mobile screen during scroll.
I did topbar sticky with this code:
$(document).ready(function(){
$(window).scroll(function(){
var sticky = $('#top-header'),
scroll = $(window).scrollTop();
if (scroll >= 100) {
sticky.addClass('fixed');
} else {
sticky.removeClass('fixed');
}
});
});
You should modify your condition statement:
if ((scroll >= 100) && ($(window).width() > /* Mobile screen width */)) {
sticky.addClass('fixed');
}
You can add media query using css or you can define screen width for your jQuery code.
if($(window).width() > 767){
$(document).ready(function(){
$(window).scroll(function(){
var sticky = $('#top-header'),
scroll = $(window).scrollTop();
if (scroll >= 100) {
sticky.addClass('fixed');
} else {
sticky.removeClass('fixed');
}
});
});
}
use this code and you also need one more condition for mobile device width. using this code you can remove the "fixed" class on resize also.
$(document).ready(function(){
$(window).on('scroll resize',function(){
var sticky = $('#top-header');
var scrollTop = $(document).scrollTop();
var windowWidth = $(window).width();
if(scrollTop >= 200 && windowWidth >= 768){
sticky.addClass('fixed');
}else {
sticky.removeClass('fixed');
}
});
});

Fix div position between two heights

I have a div that I want to keep position: fixed when scrolling between two points.
For example, it should remain fixed only between the height of it's container div
I've done the following:
$window.scroll(function(e) {
pos = $('.container-element').height();
if ($window.scrollTop() > pos) {
$(scroll-element).css({
position: 'relative',
});
} else {
$(scroll-element).css({
position: 'fixed',
});
}
});
However, this doesn't stop the scroll-element from becoming relative on reaching the end of the container-element. What should I do to achieve the intended behavior?
EDIT:
JSFiddle: http://jsfiddle.net/09760d60/
I think You should remove fixed position when $(window).scrollTop() > containerHeight-childHeight
$(document).ready(function(){
$(window).scroll(function(e) {
containerHeight = $('.container-element').height();
childHeight = $(".scroll-element").height();
if ($(window).scrollTop() > containerHeight-childHeight) {
$('.scroll-element').removeClass('fixed');
} else {
$('.scroll-element').addClass('fixed');
}
});
});
Please check updated fiddle
http://jsfiddle.net/PrashantShirke/1u991v1j/
You should check the top and bottom bounds of your container, and compare it with the top and bottom bounds of your scroll element :
$(document).ready(function(){
$(window).scroll(function(e) {
containerTop = $('.container-element').offset().top;
containerBottom = $('.container-element').height()+$('.container-element').offset().top;
scrollEl = $('.scroll-element').height();
if ($(window).scrollTop() >= containerTop && $(window).scrollTop()+scrollEl <= containerBottom) {
$('.scroll-element').css({
"top":$(window).scrollTop()+"px"
});
}
});
});
Exemple
$(window).scrollTop() < containerTop: scroll element is at top of content
$(window).scrollTop()+scrollEl > containerBottom: bottom of scroll element is at bottom of content
If scroll element has to move, adjust its top property while being absolutelly positioned by CSS.
I think it would be more robust to check the bottoms of the container and window, not the heights of the container and child.
$(document).ready(function(){
var $window = $(window);
var $container = $('.container-element');
var $scroll = $('.scroll-element');
var containerBox = $container[0].getBoundingClientRect();
$window.scroll(function(e) {
var scrollBottom = $window.scrollTop() + $window.height();
var canSeeContainerBottom = scrollBottom > containerBox.bottom;
$scroll.css('position', canSeeContainerBottom ? 'relative' : 'fixed');
});
});
http://jsfiddle.net/bryandowning/09760d60/14/

Animate element on scroll

I would like to animate a div when user scrolls the page.
For that, i implemented this code:
var slide = jQuery(".apresentacao-spc-01");
var opening = false;
var closing = false;
var pos = jQuery(window).scrollTop();
jQuery(window).scroll(function() {
var pos = jQuery(window).scrollTop();
console.log(pos);
if (pos > 100) {
if (!opening) {
opening = true; closing = false;
slide.stop().animate({
'opacity': 1,
'margin-left': '0px'
}, 700, function() {
opening = false;
});
}
} else {
if (!closing) {
closing = true; opening = false;
slide.stop().animate({
'opacity': 0,
'margin-left': '-1000px'
}, 500, function() {
closing = false;
});
}
}
});
The issue is:
Using "if (pos > 100) {", if the user resolution is big enough to show the element before he needs to scroll, he won't see the element unless he begins to scroll the page.
My question is:
How can I get a scroll animation that will be executed when the element is visible?
I mean: If the element is visible on page load, the animation automatically starts... If the element is not visible on page load, the animation waits the scroll reach the element to start...
Thanks.
There a few different things you could do. My first thought was to query the height of the viewport with something like this:
var viewportWidth = document.documentElement.clientWidth
, viewportHeight = document.documentElement.clientHeight
And then trigger the animation if it is taller than the distance the element is down.
A more dynamic solution would be to use a function that checks to see if the element is in viewport the automatically, that way you wouldn't need to worry about adjusting the height if you changed stuff on your page:
function isElementInViewport (el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
);
}
credit to this response.
There is a use guide and further information in the link provided.
Good luck!

JQuery window scroll top and bottom

I am able to load my ajax when scrolling all the way to the bottom, i am trying to figure out how i can modify the piece of code below so that it works only when the window is scrolled to the top ?
$(window).scroll(function () {
if ($(document).height() <= $(window).scrollTop() + $(window).height()) {
//this works here for scrolling bottom
}
else if ($(document).height() >= $(window).scrollTop() + $(window).height()){
//i tried checking for greater than the window scroll but that didn't owrk
}
});
When the scrollTop() returns the vertical position of the scroll bar 0 it means the scroll bar is in top position.
$(window).scroll(function () {
if ($(window).scrollTop() == 0){
alert("Up");
}
});
Or you can update your code as follows,
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() < $(document).height()){
alert("Up");
//i tried checking for greater than the window scroll but that didn't work
}
});
Check this or perhaps you should check if height of document and window object to make sure they're not null.
$(window).scroll(function () {
if ($(document).height() <= Number($(window).scrollTop() + $(window).height())) {
//this works here for scrolling bottom
}
// only greater i think, not equa
else if ($(document).height() > Number($(window).scrollTop() + $(window).height())){
}
});

Categories

Resources