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)
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.
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');
}
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 trying to duplicate the left nav at http://www.kahuna-webstudio.fr/. If you take a look at http://www.kahuna-webstudio.fr/, and scroll down about 50 pixels or so, you will see a div appear off to the left of the screen that has some navigation in it. I have most of it working, thanks to the help of some of you at stackoverflow. But the one part I do not have working is that the content of my div, images, do not stay stationary in place (or always visible) as you scroll down.
So what I want to happen is: when the div appears at the left of the screen, when the user scrolls down, I want the content of the div to appear always in view.
Right now what I have working is: through animate() I set the height of my left nav div to the document height, and the width grows to 80 pixels, and then some images fadeIn(). But the page is fairly long and as the user scrolls down they are also able to scroll down the height of my left nav div; and I always want the content of my left nav to always appear in view to the user.
I think this person posted a similiar question (Keeping a header always in view) but I am finding it difficult to attach if to my example code. Can anyone help? I appreciate it a lot.
Here is my code:
$(window).scroll(function(){
var wintop = $(window).scrollTop();
var docheight = $(document).height();
var winheight = $(window).height();
var newwidthgrow = 80;
var smallheight = 0;
var smallwidth = 0;
if((wintop > 296)) {
$("#slidebottom").stop().animate({height:docheight +"px"},'fast',function(){
$("#slidebottom").stop().animate({width:newwidthgrow + "px"},'slow',function(){
$("#slidebottomContents").fadeIn();
});
});
}
if((wintop < 25))
{
$("#slidebottom").stop().animate({height:docheight +"px"},'fast',function(){
$("#slidebottomContents").fadeOut(function(){
$("#slidebottom").stop().animate({width:smallwidth + "px"});
});
});
}
});
As far as i'm concerned this can be covered by only css.
To keep the div in the same position you can apply the following css:
css:
div id {
position: fixed;
left: 0px
width: 'your width'
}
position fixed freezes the div in the position you want.
left keeps the div positioned on the left side of you page.
does this answer your question and solve your problem?
if not let me know!
This question sort of relates to this one: Append div to body when URL hash # changes
I'm using Curtain.js and currently I have a fixed div that pops up when the hash changes. I.E the div fades in when the user scrolls down the page to different panels. I don't want this div to be visible on the first panel.
The problem I now have is that when the visitor scrolls back up the page to the top the fixed div is still visible. I.e. appearing on top of the first panel. I would like to fade that div out as soon as it hits the bottom of that first panel. The other issue is that the panel's height adjusts to the height of the browser window (fluid/responsive layout) ruling out any fixed pixel JS solutions, which is what my code is based on:
// fade in/fade out banner titles
$(window).trigger('scroll');
var divs = $('.nav-wrap');
$(window).scroll(function(){
if($(window).scrollTop() < 550){
divs.fadeOut("slow");
} else {
divs.fadeIn("slow");
}
});
Anyone have any suggestions??
you can use window.height() which returns the height of the browser's viewport:
var vp = $(window).height(); // height of the browser's viewport
var divs = $('.nav-wrap');
$(window).scroll(function(){
if($(window).scrollTop() < vp){
divs.fadeOut("slow");
} else {
divs.fadeIn("slow");
}
});