I have a homepage with a 100vh div at the top, and I would like to hide it when you scroll down after this div. Or disable the posibility to scroll up after scrolling this 100vh div. This div should only appear once when you arrived on the website.
Here the link : http://tmp.thomasdesnoyers.com/
After the big coloured background div you shloudn't be able to scroll up.
I tried to add a 'display:none' proprety to this div after scrolling the height of the window but it has the effect of take all the content up...
If anybody have any clues on this…
This the div to hide :
<div id="home-background" class="monobg">
<?php $images_toomany = array("/wp-content/img/toomany.svg", "/wp-
content/img/toomany_2.svg", "/wp-content/img/toomany_3.svg", "/wp-
content/img/toomany_4.svg", "/wp-content/img/toomany_5.svg");?>
<?php echo '<img src="'.$images_toomany[array_rand($images_toomany)].'"
class="toomany" />';?>
<?php $images_pictures = array("/wp-content/img/pictures.svg", "/wp-
content/img/pictures_2.svg", "/wp-content/img/pictures_3.svg", "/wp-
content/img/pictures_4.svg", "/wp-content/img/pictures_5.svg",);?>
<?php echo '<img src="'.$images_pictures[array_rand($images_pictures)].'"
class="pictures" />';?>
</div>
Thank you.
Thomas
Yes. Super simple. Just add overflow:hidden to your body element when you want to prevent scrolling beyond the current viewport. You can do this dynamically via JS or jQuery.
Try this
$(window).scroll(function() {
var div_height = $('#home-background').height();
var page_scroll = $(window).scrollTop();
if(page_scroll > div_height) {
$('#home-background').css('display', 'none');
}
});
here my code with the overflow technic.
I think it's a good start :
jQuery(function($) {
var $nav = $('body');
var $win = $(window);
var winH = $win.height(); // Get the window height.
$win.on("scroll", function () {
if ($(this).scrollTop() > winH ) {
$nav.addClass("hide");
}
}).on("resize", function(){ // If the user resizes the window
winH = $(this).height(); // you'll need the new height value
});
});
Related
it isn't a duplicate as I've read the others question but everyone assume that the scroll is vertical, while i need this for horizontal scroll.
What i'm trying to do is to scroll a div, placed somewhere in a page, when it reach the center of the screen or it is almost visible, then when it end its scroll i need to continue the page scrolll.
Actually i have a "slider" like this: JSFIDDLE
Actually, I can get an advise when the element is visible on the page after scrolling, but I don't know how to disable vertical scroll, scroll my div, and then scroll page again. The important thing is that the div scroll how much i continue the scrolling (intended with mouse, keyboard and maybe touch, it will be awesome)
function testInView($el){
var wTop = $(window).scrollTop();
var wBot = wTop + $(window).height();
var eTop = $el.offset().top;
var eBot = eTop + $el.height()+50;
return ((eBot <= wBot) && (eTop >= wTop));
}
function setInView(){
$(".slider-wrapper").each(function(){
var $zis = $(this);
$zis.removeClass("inview");
if(testInView($zis)){
alert("eccolo");
}
});
}
$(document).scroll(function(){
setInView();
});
$(document).resize(function(){
setInView();
});
$(document).ready(function(){
setInView();
});
If you want to disable vertical scrolling then just set overflow-y: hidden on body element
body {
overflow-y: hidden;
}
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 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/
I am creating a fixed position sub-nav menu bar for a responsive site. All the examples I can find of a fixed menu that sticks to top after scrolling are based on a set number of pixels from top.
However, since I am working a responsive site the pixels from top where I need the menu to come in are different based on viewport (on small screens, the menu should appear after more area scrolled down because the content fills are taller area of screen).
I have a working example and am using the following jquery script:
$(document).ready(function(){
$('#navigation a, #fixedbar a').on('click', function(e) {
e.preventDefault();
});
$(window).on('scroll',function() {
var scrolltop = $(this).scrollTop();
if(scrolltop >= 215) {
$('#fixedbar').fadeIn(250);
}
else if(scrolltop <= 210) {
$('#fixedbar').fadeOut(250);
}
});
});
As you can see the fixed bar fades in if more than 215 pixels scrolled from the top. Instead I'd like to have it appear after scrolling past a certain div. That way I know it will come in after user has fully scrolled past the intro text.
Here's my fiddle
Any good examples out there of what I want to do? Or easy way to modify the jquery script? Thanks in advance.
This modification will make it fade in after it passes the static nav
DEMO
var $nav = $("#navigation");
if(scrolltop >= $nav.offset().top + $nav.height()) {
$('#fixedbar').fadeIn(250);
}
else {
$('#fixedbar').fadeOut(250);
}
Demo http://jsfiddle.net/EHhQE/1/
You need to fade out and fade in the navigation when the scroll reaches the bottom and the top of the navigation bar respectively.
var topOfDiv = $('#navigation').position().top;
var bottomOfDiv = $('#navigation').position().top+$('#navigation').outerHeight(true);
And fetched in your code:
$(document).ready(function(){
$('#navigation a, #fixedbar a').on('click', function(e) {
e.preventDefault();
});
$(window).on('scroll',function() {
var scrolltop = $(this).scrollTop();
var topOfDiv = $('#navigation').position().top;
var bottomOfDiv = $('#navigation').position().top+$('#navigation').outerHeight(true);
if(scrolltop >= bottomOfDiv) {
$('#fixedbar').fadeIn(250);
}
else if(scrolltop <= topOfDiv) {
$('#fixedbar').fadeOut(250);
}
});
});
$(document).ready(function ()
{
slider();
});
$(window).scroll(function ()
{
slider();
});
function slider()
{
if (document.body.scrollTop > 208)
$('#fixedMenu').fadeIn(0);
else
$('#fixedMenu').fadeOut(0);
}
Right now I have it that if a user scrolls past the bottom of the side bar, then the sidebar turns to fixed and stays on the users page while they read the rest of the main content.
But now my fixed div is falling out into the footer. So, how can I stop it from falling out of the parent div and into the footer?
Here's a fiddle of what's going on: http://jsfiddle.net/95W8w/
All the code is in jsFiddle, but since SO requires I put code here if I have a jsFiddle include.
JavaScript:
$(document).ready(function() {
// Cache selectors for faster performance.
var $window = $(window),
$sidebar = $('#anchor'),
$sidebarAnchor = $('#right');
// Run this on scroll events.
$window.scroll(function() {
var window_top = $window.scrollTop();
var div_top = $sidebarAnchor.offset().top;
if (window_top > div_top) {
// Make the div sticky.
$sidebar.addClass('stick');
$sidebarAnchor.height($sidebar.height());
}
else {
// Unstick the div.
$sidebar.removeClass('stick');
$sidebarAnchor.height(0);
}
});
});
Change bottom to top in your .stick class definition to make the sidebar stick to the top instead of bottom.
.stick {position: fixed; top:0px;}