Hi i try to display a div when i scroll to bottom of my page and hide it when its not on the bottom.
The alert message work when at the bottom page but setting css visible or trying with fadeIn or out not work. I need little help to see what i did wrong.
Also on IE 9 the div "#loadSection" its hidden but i still able to put my cursor on it and click when other browser work correctly.
here my code.
$(window).scroll(function() {
if ($(window).scrollTop()+$(window).height() > $(document).height()){
$("#loadSection").fadeTo(0,0).css('visibility','visible');
alert("bottom");
}else{
$("#loadSection").fadeTo(0,0).css('visibility','hidden');
}
});
The problem is that the fadeIn/Out happens with every bit of scroll and it's causing the div to flash. Here's a CSS animated option:
$(window).scroll(function() {
if ($(window).scrollTop()+$(window).height() >= $(document).height()){
$("#loadSection").addClass('visible');
}else{
$("#loadSection").removeClass('visible');
}
});
DEMO:
http://jsfiddle.net/Eh53d/
The visibility property allows an element to remain on the page and take up space. To solve your issue in IE where you're still able to mouse over it, use the display property instead.
To your main issue, try the following:
var loadsection = $("#loadSection");
if ($(window).scrollTop() >= $(document).height() - $(window).height()){
if ( loadsection.is(':hidden') ) loadsection.fadeIn();
}else{
if ( loadsection.is(':visible') ) loadsection.fadeOut();
}
fadeIn and fadeOut will utilize the display property, which will completely remove the element when it's not visible. Also, you're fading to zero opacity in both of your fadeTo calls, so even if though visibility is being set, the element is still completely transparent.
Related
I am using jquery-smooth-scroll for controlling anchor scrolling. There is a feature/option to decide behaviour after scroll. I chose to hide the button after it gets to the bottom anchor. I then implemented some jquery to bring that button back when scroll was no longer 100% at the bottom of the page.
What I am struggling to do is make sure that the button always fades away when scroll is 100% down. The same way a standard back to top works but opposite ends of the page in my case.
Please see this fiddle I have put together https://jsfiddle.net/k253jvt8/
/* show and hide button*/
$(window).bind("mousewheel DOMMouseScroll scroll", function (e) {
if (document.body.scrollTop == 0) {
$('.saveForm').fadeIn();
//below isnt working to fade away .saveform when scroll is 100% bottom
} else {
$('.saveForm').fadeOut();
}
});
The above is the code I use to bring back the button after it disappears, but then cant get it to disappear again when manually scroll to the bottom, it only disappears again when I use the button to get to the bottom - have a play with my fiddle and you will see what I mean.
In your fiddle, your wrapping <div class="reportFormPage"> is positioned absolute in relation to the document.
As a result your <body> element does not take it in to account when determining its height; hence it always has a height value of 0. Because of this your 'else' condition never occurs.
Removing the position: absolute; css rule resolves this issue.
Try this
if ($(window).scrollTop() ==0) {
$('.saveForm').fadeIn();
} else if($(window).scrollTop() < $(document).height()) {
$('.saveForm').fadeOut();
}
});
along with removing position:absolute as dommmm has said.
Here is the working fiddle https://jsfiddle.net/sd6sh4v6/2/
See if you like the change I brought to your smoothScroll by using no-js fallback.
I have a simple onScroll function, which shows a DIV when the scroll (down) height is 100 for example, and then if scrolled up soon as it reach 100 it hides the div, works perfect.
However, if I scroll down quickly and while its showing the DIV if I quickly scroll up & down 2 three times, it doesn't catch the event, even if its up again, it still shows the DIV, but again if I scroll even 1 pixel down, it hides it and if reaches 100 then it shows DIV again.. I hope I made it clear, I dont have an online demo as I am working on localhost.. below is my function that I am using standalone in the template within just <*script> tag..
jQuery(document).scroll(function ($) {
var y = jQuery(this).scrollTop();
var hoffset = 100;
if (y > hoffset) {
// show div
} else {
// hide div
}
});
Can someone please guide me to right direction, what other best approaches can be done for this, basically I am doing this for header nav div..
regards
Do you want like this? See my Fiddle
I use fadeIn() and fadeOut() instead.
The only way I found to stop animation, while its in the process is below and works..
jQuery('.thedivclass').stop(false, true).slideDown();
I am creating a site in which there are a number of fixed background images that you scroll past. Associated with each fixed background is an image slider (or text) that is hidden until the title is clicked on. These items are all fixed positioned.
I was able to make this work by using z-index to place items in order top to bottom/first to last and then have each disappear in turn using:
$(document).scroll(function() {
$('#porttitle').toggle($(this).scrollTop() < 225);
});
However, I am unable to use this because the length pixel distance down on the page changes based on the screen size. I am pretty new to Jquery but wanted to try to use .offset .top to have the item disappear not based on the pixel length to the top of the page but instead when an element appears on the screen. This is what I have so far but it isn't seeming to work.
$(document).scroll(function() {
$('#porttitle').toggle($(this).scrollTop() < $(‘article.post-100’).offset().top);
});
Here is the link to the site: http://s416809079.onlinehome.us (not final location - just developing)
Any thoughts?
Thanks!
I think this may work for you, read the comments on the code for a line by line explanation.
Working Example
$(window).scroll(function () { // When the user scrolls
$('div').each(function () { // check each div
if ($(window).scrollTop() < $(this).offset().top) { // if the window has been scrolled beyond the top of the div
$(this).css('opacity', '1'); //change the opacity to 1
} else { // if not
$(this).css('opacity', '0'); // change the opacity to 0
}
});
});
I'm conditionally changing the opacity rather than using toggle because:
...jQuery does not support getting the offset coordinates of hidden
elements or accounting for borders, margins, or padding set on the
body element.
While it is possible to get the coordinates of elements with
visibility:hidden set, display:none is excluded from the rendering
tree and thus has a position that is undefined.
Related documentation:
.offset()
.each()
.scroll()
.scrollTop()
i have a fixed navigation bar. I want the initial menu to not be displayed only after u scroll the page to a certain position. I did thaa working but then when i scroll back on top the menu which initial is not displayed appears. I have the class in css defined as display none. Can u help me with this? Thnx in advance.
$(function(){
var menu = $('#menu'),
pos = menu.offset();
$(window).scroll(function(){
if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
menu.fadeOut('fast', function(){
$(this).removeClass('default').addClass('fixed').fadeIn('fast');
});
} else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
menu.fadeOut('fast', function(){
$(this).removeClass('fixed').addClass('default').fadeIn('fast');
});
}
});
});
http://jsfiddle.net/VjfHg/
EDIT: Hey, thanks for all your answers, all are working, sorry if i'm to bold but could you help me with displaying it to a certain position let's say after u scroll 500px and then fade out at the same position?:)
You have to modify your else loop like below (to use fadeOut):
fadeIn displays the matched elements by fading them to opaque whereas fadeOut hides the matched elements by fading them to transparent.
else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
menu.fadeOut('fast', function(){
$(this).removeClass('fixed').addClass('default').fadeOut('fast');
});
Working Demo
EDIT: Updated Working Demo based on the change in the question.
else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
menu.fadeOut('fast', function(){
$(this).removeClass('fixed').addClass('default').fadeOut('fast');
});
}
Instead of fadeIn use fadeOut
The reason for this to happen is this line
$(this).removeClass('fixed').addClass('default').fadeIn('fast');
After you add the class 'default' you use the fadeIn function . jQuery detects that the fadeIn effect is being applied to a element which has display:none and adds a new CSS style to that div which is display: block
There are 2 ways to resolve this.
Jquery Way
Change
$(this).removeClass('fixed').addClass('default').fadeIn('fast');
TO
$(this).removeClass('fixed').addClass('default');
jQuery Way Demo
CSS Way
Change following line in your .default class.
display:none;
TO
display:none !important;
CSS Way Demo
I want to achieve the effect that is used on this Header on this example website:
http://anchorage-theme.pixelunion.net/
You will notice that as you scroll the page, the header slowly moves upward until it disappears from view. I want to achieve this same effect. I believe it will need some JS and CSS positioning but still have no clue how to achieve this. Is this done with parallax scrolling?
Would appreciate if someone could give me a quick example of the code used to do this with a element. So I can then use it on my own site.
Cheers.
the $(window).scroll(function () {...}) is the one you need here
$(document).scrollTop() is the amount of scrolled distance from the top
Use this:
$(window).scroll(function(){
if ($(this).scrollTop() > x){ // x should be from where you want this to happen from top//
//make CSS changes here
}
else{
//back to default styles
}
});