Fade out a div when scroller hits bottom of another div - javascript

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");
}
});

Related

Javascript to make div appear after scroll is showing on page load?

I input this code (which I pulled from this answer: Make a div appear when scrolling past a certain point of a page) to make a div appear when the user scrolls down on the page.
The problem is: The div appears as soon as the page loads, and disappears when the user scrolls, and then reappears when they scroll > 700.
How do I get the div to not show up at the beginning of the page load?
Thanks!
<script>
// Get the headers position from the top of the page, plus its own height
var startY = 700;
$(window).scroll(function(){
checkY();
});
function checkY(){
if( $(window).scrollTop() > startY ){
$('.scroll-up').slideDown();
}else{
$('.scroll-up').slideUp();
}
}
// Do this on load just in case the user starts half way down the page
checkY();
</script>
In your CSS set display:none property for the div you don't want to show on page load
Instead of slideUp() and slideDown()
you can use, fadeIn() and fadeOut() or slidetoggle();

How to load data without changing the scrolling position?

Why does the scroll position change when I prepend data in given data. I scroll to top it prepend data but scroll position goes to top. But I saw lot of example in Facebook and whatsapp in which when it load previous data scroll position remain same.
Can we retain the scroll position ? http://jsfiddle.net/cQ75J/17/
if ($(this).scrollTop() === 0 && pages.length) {
console.log("up");
$("#next").html('')
$("#pre").html('')
$("#next").html($("#current").html());
$("#current").html('');
$("#current").html(pages.pop())
.prependTo($("#fullContainer"));
}
This has to be done in Javascript:
One way to do this is to use a hidden div of the same height and width as the one you are prepending and measure it's scrollHeight when you add the content to it. Then, after you prepend the text, simply set the content div's scrollTop to the scrollHeight of the hidden div:
$(document).ready(function(){
setTimeout(function(){
$("div#hiddenDiv").html("Testing<br><br><br>");
var coffset = document.getElementById("hiddenDiv").scrollHeight;
$("div#content").prepend($("div#hiddenDiv").html());
document.getElementById("content").scrollTop += coffset;
}, 5000);
});
In the following fiddle, text will be prepended to the div after a few seconds, but the scroll
position will not change.
JSFiddle

How to keep content of a div always visible despite moving scrollbar down

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!

Sticky div offset from top window using waypoint

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)

Dynamically change relatively positioned content to fixed content - bug

I have a sidebar that contains content larger than the screen. As the user scrolls down I want that content to come into view until the last bit. Then I want it to be fixed so that as much content stays on screen as possible. I actually want it to work exactly like the "Similar Questions" sidebar when you are posting a question in SO. In each of these example links scroll down. In the broken case notice how everything gets all jumpy.
Should work like this = http://jsfiddle.net/mrtsherman/G4Uqm/2/
But broken in this case = http://jsfiddle.net/mrtsherman/G4Uqm/1/
In the broken case it looks like the scroll event is being retriggered when you reach the end of the page. This then causes subsequent scroll events to trigger which then screw everything up. How can I properly handle this case? I just can't figure it out.
$(document).ready(function() {
var dynamic = false;
var topOfSidebar = $("#sidebar").offset().top;
var leftOfSidebar = $("#sidebar").offset().left;
var botOfSidebar = topOfSidebar + $("#sidebar").height();
var botOfScreen = $(window).height() + $(window).scrollTop();
//if sidebar fits on screen then use fixed version of it
if (botOfSidebar < $(window).height()) {
$("#sidebar").addClass("fixed");
$("#sidebar").css("top", topOfSidebar);
$("#sidebar").css("left", leftOfSidebar);
}
else {
dynamic = true;
}
//toggle sidebar class when user scrolls
$(window).scroll(function() {
console.log($("#sidebar").css("position"));
botOfScreen = $(window).height() + $(window).scrollTop();
//return;
if (botOfSidebar < botOfScreen && dynamic) {
$("#sidebar").addClass("fixed");
//$("#sidebar").css("bottom", 0);
//$("#sidebar").css("left", leftOfSidebar);
}
else if (dynamic) {
$("#sidebar").removeClass("fixed");
}
});
});
So I figured this one out on my own. The trick is to wrap the content in a div with a min-height attribute. If we switch the sidebar to fixed then the div holds the place of the sidebar. Therefore no more screen resizing.
.wrap creates the div
.parent gets the sidebar's parent (the new div)
add css properties where min-height is the height of the sidebar. Remove padding and margin
$("#sidebar")
.wrap('')
.parent()
.css("min-height", this.height())
.css("padding", "0px")
.css("margin", "0px");

Categories

Resources