So I am learning bootstrap and one of the really neat effects I came across was on the website of spook-studio [1] was when you scroll past the top navbar logo, the big logo collapses into a small version of it and along with it appears the navbar.
I know how to make the navbar and then make each of the sections of navbar correspond to the page as you scroll down, but how do you go about making the nav bar appear after scrolling?
Thank you so much for any links to questions or pointers on where to go read more!
[1] http://www.spookstudio.com/
jsFiddle : http://jsfiddle.net/8My5v/
(minor update)
To achieve that you can use jquery's scroll() and scrollTop() method.
Now this is how you can do it :
in scroll for window,
Detect window scroll amount (i.e. if its 0 or more).
If window is scrolled down -> show menu
If window is scrolled to top -> hide menu
Code in demo :
$(window).scroll(function () {
if ($(window).scrollTop() == 0) {
$('.menu').fadeOut(200);
$('.welcome').animate({
height: "300px"
}, 300);
shown = false;
} else if ($(window).scrollTop() > 0 && !shown) {
$('.menu').fadeIn(200);
$('.welcome').animate({
height: "150px"
}, 300);
shown = true;
}
});
Related
Hey everyone I've been learning js and HTML and I've been trying hard to learn alot.
I have a navbar that I want to trigger at a certain part of my page (via scrolling). Right now the code I have forces the navbar to keep fading in and out in an endless loop.
Here's my Javascript:
$('.navbarclass').hide(0);
$(window).on('scroll', function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = 150;
if(y_scroll_pos > scroll_pos_test) {
$('.navbarclass').slideToggle();
}
});
Basically I want the navbar to trigger at 150 (which it does) but it keeps looping the toggle in and out.
It is looping in the toggle because the condition will be always true after you have scrolled the 150px. Hence, each scroll greater than 150px will make the navbar slideDown or slideUp.
I would do the conditional in this way.
if (y_scroll_pos > scroll_pos_test) {
$('.navbarclass').slideDown();
} else {
$('.navbarclass').slideUp();
}
This will slideDown the navbar when the scroll is greater than 150px and will slideUp when is less or equal than 150px.
If you just want it to be shown when the scroll is greater than 150px and do nothing else, just delete the else block.
Change .slideToggle() to .slideDown()
I am trying to figure out how to get this sliding navigator bar effect: http://manoscrafted.com/. I can get as far as fixing the top hero image and sliding the bottom nav bar up and down, however, it doesn't stick to the top.
Is this done through JavaScript or am I missing something in CSS?
Thanks!
Achieved using JavaScript, most people would call this "parallax" scrolling with a "fixed" or "sticky" header/navigation
See parallax examples:
http://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/
See sticky/fixed examples:
http://jsfiddle.net/tovic/2jqCA/
var win = $(window),
fxel = $('nav'),
eloffset = fxel.offset().top;
win.scroll(function() {
if (eloffset < win.scrollTop()) {
fxel.addClass("fixed");
} else {
fxel.removeClass("fixed");
}
});
If you take a look at http://www.kahuna-webstudio.fr/ and scroll down the page about 50 pixels or so you will see a div on the left side of the screen slide out. I have managed to duplicate this effect but there is one thing that escapes me; and that is when you hit refresh on my page my jquery programming resets. I don't want this to happen. http://www.kahuna-webstudio.fr/ has it working perfectly. On their page when scroll down 50 pixels and the left nav appears and even when you hit refresh the left nav is still there. The left nav only disappears when the user scrolls back to the top of the page.
What is currently working: The user scrolls down 296 pixels on my page and the left nav slides out and the user brings the scroll bar back to the top of the page (pixels less than 25) and the left nav slides back and disappears. This is all working.
What is not working: But let's say the user scrolls down 296 pixels and the left nav slides out and then the user hits refresh while they are viewing the page. Well in this case the left nav disappears. My jquery programming is reset. I want the left nav, when the user is at 296 pixels or greater, to always be visible even if the user hits refresh.
My code is below. I hope my question makes sense and I welcome any help. Thank you.
$(window).scroll(function () {
var wintop = $(window).scrollTop();
var docheight = $(document).height();
var winheight = $(window).height();
var newwidthgrow = 80;
var smallheight = 0;
var smallwidth = 0;
//var expanded = "false";
if ((wintop > 296)) {
//expanded = "true";
$("#slidebottom").stop().animate({
height: docheight + "px"
}, 'fast', function () {
$("#slidebottom").stop().animate({
width: newwidthgrow + "px"
}, 'slow', function () {
$("#slidebottomContents").fadeIn();
});
});
}
if ((wintop < 25)) {
//expanded = "false";
$("#slidebottom").stop().animate({
height: docheight + "px"
}, 'fast', function () {
$("#slidebottomContents").fadeOut(function () {
$("#slidebottom").stop().animate({
width: smallwidth + "px"
});
});
});
}
});
If you don't have code in place to remember the scroll position before a refresh, the page will always refresh and scroll position will be 0 again. It sounds like that's not your desired functionality. Triggering a scroll at startup will not fix your problem unless you set the correct window scroll position before triggering it.
The example page you gave looks like it uses multiple scroll libraries, one of which (not sure which one) probably handles setting the scroll position on a refresh.
To do it yourself, you'd have to make use of local storage or the url like explained here:
Refresh Page and Keep Scroll Position
Have this window scroll function in a separate place. Call it from window scroll and also from document ready. This will make sure that the user's position is checked both when the page is being scrolled and when the page is loaded/refreshed.
You can use cookie to solve this probelm if you don't want to use server side to fix position when page is reloaded.
I'm trying to make my simple "scroll back to the top" image appear and disappear based on how far away from the top of the page you are. For the sake of example, let's say 100 pixels away from the top.
Here's what I have. It seems to work on scroll down, the image div fades in.
When I scroll back to the top, the div doesn't fadeOut. Any tips?
$(window).scroll(function() {
if ($(this).scrollTop()>100)
{
$('#toTop').fadeIn();
}
else
{
$('.#toTop').fadeOut();
}
});
I think you've a typo in your code: $('.#toTop').fadeOut(); should be $('#toTop').fadeOut();
Update
Just a simple improvement. To prevent the element be faded all the time you scroll, check if it was already faded earlier:
var $toTop = $('#toTop');
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$toTop.fadeIn();
} else if ($toTop.is(':visible')) {
$toTop.fadeOut();
}
});
i have a website it like 1800px in height. i want when user scrolldown around 200px it show an div on the top of the layout and its should stick with the page. when user scroll back to top , the div should disappear.
You can trigger an event on scroll:
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
topDiv.show();
} else {
topDiv.hide();
}
});
You can use the jquery scroll method
$(window).scroll(function () {
$("span").css("display", "inline").fadeOut("slow");
});