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.
Related
Good evening,
I have a problem with hiding text on page when it loads, it should appear after I scroll down the page. But it's visible, when I reach the set point, it disappears and immediately appears again. And when I scroll to top again, then it finally disappears.
When I try to hide it with display: none; or visibility: hidden;, it doesn't even appear.
What should I change in the code?
Thanks for your help!
JS:
$(window).scroll(function() {
var pxFromBottom = 350;
if ($(window).scrollTop() + $(window).height() > $(document).height() - pxFromBottom) {
$('.scroll-btn').fadeIn('slow')
} else {
$('.scroll-btn').fadeOut('slow');
}
});
CSS:
html { height:2000px; background-color: #666; }
HTML:
<div style="position:absolute; top: 120%;" class="scroll-btn"> my content to show </div>
The first time you are scrolling down its when your code first hides the div, it doesnt 'fadein' and then 'fadeout'.
Just fades out.
The fix this,
add to the div style
display:none;
this way you wont be able to see div when scorlling down.
But this thing only fixes one problem.
Your div is placed at 120% of the viewport height. So if the viewport height is 1080px, the div will have top 1296px.
But in your js code, you check
if $(window).scrolltop + $(window).height > $(document).height() - pxFromBottom)
So by the time the div get displayed you cant see it because it was already scrolled by.
But its still get the fadeIn, so when you scroll back up you can see it before its get fadeOut agian.
you should change your if stament to this:
if (($(window).scrollTop()) > ($(window).height() - pxFromBottom))
This way you check if the current scroll, is bigger the viewport height - pxFromBottom.
And once you scroll down you will the div fades in.
Fiddle - https://fiddle.jshell.net/jgthb6m2/5/
I'm not exactly sure what your issue is, but if the text needs to be hidden on load, perhaps do the following:
$( document ).ready(function() {
$('.scroll-btn').hide();
});
The problem with the calculation. The below code display the text, when the scroll top reaches the text. I assume that when you scroll to the text it should appears and when you scroll to the top again the text should disappears.
if ($(window).scrollTop() > $('.scroll-btn').position('top')) {
$('.scroll-btn').fadeIn('slow');
console.log('fade in');
} else {
$('.scroll-btn').fadeOut('slow');
console.log('fade out');
}
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.
I'm styling an element with position fixed and other css in a certain condition ( basically if the user scrolls up ), but the element is behaving like a relative positioned element. In other words, it is scrolling with the page and not remaining fixed.
I tried isolating this issue, but this issue only exists in this site as a whole and I need it to work in this site.
var lastScrollTop = 0;
$(window).scroll(function(){
var st = $(this).scrollTop();
if(st<=lastScrollTop){
//scroll up
if($(this).scrollTop()>235) $('#searchInput').removeClass('slideIn').addClass('stickySearch');
else $('#searchInput').removeClass('stickySearch').addClass('slideIn');
}
else $('#searchInput').removeClass('stickySearch').removeClass('slideIn');
lastScrollTop = st;
});
Right now the class .slideIn has no styling associated with it, but .stickySearch does.
Here is the CSS:
.stickySearch{
width:56% !important;
position:fixed !important;
left:0;
right:0;
}
I checked in developer tools and the class is being applied and the styles are being applied, but the position fixed is just not working.
Here is a live URL: http://goo.gl/ns6UEQ
Note, it helps to have a small window in height so you can scroll. Scroll down so that the header is hidden up top and then scroll up and the search bar should appear, but the moment the header comes back into view the search bar will go back into place in the header.
This is a bug that exists in CSS and in Chrome and Firefox's implementation of CSS.
When you have a parent element that has backface-visibility or is transformed, its children can not be fixed.
More here: http://www.sitepoint.com/forums/showthread.php?1129352-CSS3-tip-of-the-week-No-1&highlight=chrome+bug+fixed
Solution: remove the transform and backface visibility styling from #container
Change the if statement to something like below
var lastScrollTop=0;
$(window).scroll(function(){
if($(this).scrollTop()>150 && lastScrollTop>$(this).scrollTop()){
$('#fixedinput').addClass('fixed');
} else {
$('#fixedinput').removeClass('fixed');
}
lastScrollTop=$(this).scrollTop();
});
JSFiddle demo
As you scroll down past the grey part the will not be fixed, but once you start scrolling up it will.
I am hoping someone can kindly help. I'm by no means a programmer, and I'm trying to learn how to create a slightly different sticky div than normal. This is what I want to achieve:
when the div #projectwrapper scrolls up the screen, and is 150px from the top of the window, it should stick and stay there while the rest of the page scrolls
when scrolling back down the page, the div should return to its normal place in the page when that comes into view.
I have been trying the demos and examples, and I can nearly get it working. But it will only get activated when it goes to the very top of the window, and it stick at the very top. However I need the activation and sticking to happen 150px from the top.
This is what I have so far.
$(document).ready(function() {
$('#projectwrapper').waypoint(function(event, direction) {
}, {
offset: 150
}).find('#projectdescription').waypoint(function(event, direction){
$(this).parent().toggleClass('sticky', direction === "down");
event.stopPropagation();
});
});
I haven't used waypoint. You can do using some simple jQuery:
var projectWrapperPosition = $('#projectwrapper').position().top; //div position
$(window).scroll(function() { //when window scrolls
if($(window).scrollTop() > (projectWrapperPosition - 150)) //check if position of the window is 150px or smaller than the position of specified div has
$('#projectwrapper').addClass('change-position'); //.change-position position fixed the div
else
$('#projectwrapper').removeClass('change-position');
});
css:
.change-position {
top:150px;
position:fixed;
width:100%;
background:red;
}
Check demo: http://jsbin.com/uxizab/2/ (scroll to see the effect)
I am trying to create a jquery animated loginbox.
I am a total javascript/jquery noob.
I have a div that contains the loginbox. That div is about 150px in height, and it is placed at the top of the page, so that only the bottom 15px of the div are visible when the page is loaded.
I am trying to slide down the div so that the rest of the login box is revealed on click, and make it slide back up when the bottom part of the div is clicked again.
Now, I am doing:
$('#showLogin').click(function(e){
$('#formContainer').animate({top: "+=135px"} , 1500)
e.preventDefault()
})
What this does is animate the slide down of the div. But how can I check if it has already been slided down so I can slide it back up?
Should I check for the position of the div and decide if it should move up or down, or is there a better way to do it?
The website is here
I think you are looking for .slideToggle(). An example: http://jsfiddle.net/FL4zZ/
Try this jsFiddle example. It animates a div with a form within it on click, and retracts it once it's fully extended.
The basic jQuery is:
$('div').click(function() {
var pos = $(this).css('top')
if (!$(this).is(':animated')) {
if (parseInt(pos, 10) == 0) {
$(this).animate({'top': '-35px'}); // anim up
}
else {
$(this).animate({'top': '0px'}); //anim down
}
}
});