I have an introduction div that calculates the browser window height and fills the screen and then the user can scroll down to the main page content below.
<body>
<div id="intro"></div>
<div id="main"></div>
</body>
I'm using the following JS to calculate the window height and attach it to the intro div:
resizeWindow();
$(window).resize(resizeWindow);
function resizeWindow() {
var ww = $(window).width();
var bh = $(document).height();
var wh = $(window).height();
featureHeight = wh - 0;
$('#intro').css({'height':featureHeight+'px'});
}
What I'm attempting to do is to reduce the height of the intro div as the page scrolls and once the height reaches 0 and the user has reached the main div content, I can remove it so the user can no longer scroll back up to it.
Any help would be greatly appreciated.
var $intro = $('#intro');
$('#container').scroll(function(){
$intro.height($intro.height() + $intro.offset().top);
$(document).scrollTop();
if ($intro.height() <= 0) {
$intro.remove();
}
});
You essentially remove height from #intro until it reaches zero. It's a little reliant on the page being equal/smaller than the intro element itself, though.
http://jsfiddle.net/xvh4gbb2/1/
Related
I want to have a div be fixed at the bottom of the window when the window is taller than the content height. If the content height is taller than the window height, I want the div position to remain relative.
I currently have this mostly working, however I don't want the div to overlap the content at all. I tried various forms of below, but still not working:
var body = content+bottomBar
if (body > viewport) {
$(".bottom-bar").css({
'position':'relative'
});
} else {
$(".bottom-bar").css({
'position': 'fixed'
})
}
I also am having trouble getting the window.resize to work.
Any help would be appreciated!
http://jsfiddle.net/no05x1vx/1/
Referring to the jsfiddle linked by the OP, here are a few changes to make the code work as expected, please see the comments:
var content = $(".content").height()
var viewport = $(window).height();
// Use innerHeight here as the bottom-bar div has height 0 and padding 60px
// .height() would return 0
var bottomBar = $(".bottom-bar").innerHeight();
var body = parseInt(content)+parseInt(bottomBar)
$(window).on('resize', function(){
// Get new viewport height
viewport = $(window).height();
if (content > (viewport-bottomBar) ) {
$(".bottom-bar").css({
'position':'relative'
});
} else {
$(".bottom-bar").css({
'position': 'fixed'
})
}
});
// Trigger resize after page load (to avoid repeated code)
$(document).ready(function(){
$(window).resize();
});
I'm building a one page site, and wanting to have multiple divs, that are approximatly 400px (but vary) on top of each other. Instead of a smooth scroll, I would like jump to the next div and have it centred on the screen, at the same time adjust the opacity of the content above and below to draw attention to the centre div.
I have tried playing with a few scrolling plugins but have not had anything do what I'm after, most of them are geared towards a full page div, not one only a 1/3 or so the height of the page.
Can someone point me towards something I can adapt to perform this.
Add an event listener to the document which looks for elements with the class .next
Get the distance from the top of the viewport to the top of the element in question
subtract half the value of the viewport height minus the height of the element.
If the element is bigger than the viewport, scoll to to top of the element
Or scroll the element into the middle.
Set the opacity of the unfocused elements.
(Demo)
(function(){
"use strict";
document.addEventListener('click', function(e) {
if(e.target.className.indexOf('next') >= 0) {
var current = e.target.parentElement
var next = current.nextElementSibling || false;
if(next) {
var nextNext = next.nextElementSibling;
var height = next.offsetHeight;
var top = next.offsetTop;
var viewHeight = window.innerHeight;
if(viewHeight - height > 0) {
var scrollTo = top - ((viewHeight - height) / 2);
} else {
var scrollTo = top;
}
window.scroll(0, scrollTo);
current.style.opacity = '0.5';
next.style.opacity = '1';
if(nextNext) nextNext.style.opacity = '0.5';
}
}
}, false);
})();
http://codepen.io/BrianDGLS/pen/yNBrgR
This is what I am currently using which allows the user to track where he is on the page.
What would I have to do to show a div when the user reaches the bottom of the page? And continue to show it until he hits refresh
#show {display: none}
<div id="show">
<p>Hello</p>
<p>World!</p>
</div>
Show the div '#show' when the user reaches the bottom of the page and continue to show it for as long as he stays on the page.
Using a convention that mirrors the sample JS code:
$(window).scroll(function() {
var wintop = $(window).scrollTop(),
docheight = $(document).height(),
winheight = $(window).height(),
scrolled = (wintop / (docheight - winheight)) * 100;
if (scrolled >= 100) {
$(yourDiv).show();
}
});
The computation of the scroll percentage is straight from the link you provided and the condition just checks if you've reached 100% of the page (minus current window size).
You could also change 100 to be whatever percentage if you want to load the div before the user reaches the absolute bottom.
It could be something like:
$(window).on('scroll', function(){
var op = $(window).scrollTop() + $(window).height();
if( op >= $(document).height() ) $("#show").show();
});
You need to trigger a Javascript function when the <div id="show"> is visible in the client's viewport, for that you can use a plugin
try below code
var show=false;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height() || show==false) {
$("#show").show();
show=true;
}
});
I'm trying to create a scroller which loads content when the user nears the bottom of an element however I'm struggling with calculating the current distance from the bottom of the element #grid when the user scrolls.
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
var div = $('#grid');
var bottom = ((div.offset().top + div.height()) - scroll);
$('.scroll').html(bottom);
});
The .scroll element displays the value although it doesn't seem to be giving correct numbers. Any ideas, I've come to a stand still. I seem to be getting the distance from the top of the window to the bottom of the container, not from the current scroll position?
Top of page
Scrolled down
You need to add the height of the window too.
$(window).scroll(function (event) {
var scrollBottom = $(window).scrollTop() + $(window).height();
var div = $('#grid');
var bottom = ((div.offset().top + div.height()) - scrollBottom);
$('.scroll').html(bottom);
});
If bottom is negative by less than the window height, then the bottom of the #grid div is visible on the screen.
I have some jQuery code that adds a picture to my page whenever a user clicks on a button. I want this picture to display on top of whatever the user is looking at. The problem is that I have this image set as position:absolute and it's displaying at the very top of the page. Think about it like this:
My page is 1000px high. If the users viewport is 300px down then thats where I want the image to display, not at the very top of the page. Position:static doesn't work for me in this case because I want the user to be able to scroll past the image and not have it follow him.
Any ideas? I was thinking something along the lines of a jQuery function that returns how far down the webpage the viewport is and set that as the top position of the image(since I have it set as absolute).
Thanks in advance!
var viewportX = window.pageXOffset; var viewportY = window.pageYOffset;
Then position it relative to viewportX and viewportY.
I use this small jQuery extension to set something to center on the screen:
(function($)
{
$.fn.centerMe = function(centerIn)
{
var containerWidth = $(centerIn).width();
var containerHeight = $(centerIn).height();
var elWidth = $(this).width();
var elHeight = $(this).height();
$(this).css('left', containerWidth / 2 - elWidth / 2);
var adjTop = containerHeight / 2 - elHeight / 2;
$(this).css('top', $(parent.window.document).scrollTop() + adjTop);
};
})(jQuery);
Usage is basically: $('#elemToCenter').centerMe(window);