i have a fixed navigation bar. I want the initial menu to not be displayed only after u scroll the page to a certain position. I did thaa working but then when i scroll back on top the menu which initial is not displayed appears. I have the class in css defined as display none. Can u help me with this? Thnx in advance.
$(function(){
var menu = $('#menu'),
pos = menu.offset();
$(window).scroll(function(){
if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
menu.fadeOut('fast', function(){
$(this).removeClass('default').addClass('fixed').fadeIn('fast');
});
} else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
menu.fadeOut('fast', function(){
$(this).removeClass('fixed').addClass('default').fadeIn('fast');
});
}
});
});
http://jsfiddle.net/VjfHg/
EDIT: Hey, thanks for all your answers, all are working, sorry if i'm to bold but could you help me with displaying it to a certain position let's say after u scroll 500px and then fade out at the same position?:)
You have to modify your else loop like below (to use fadeOut):
fadeIn displays the matched elements by fading them to opaque whereas fadeOut hides the matched elements by fading them to transparent.
else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
menu.fadeOut('fast', function(){
$(this).removeClass('fixed').addClass('default').fadeOut('fast');
});
Working Demo
EDIT: Updated Working Demo based on the change in the question.
else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
menu.fadeOut('fast', function(){
$(this).removeClass('fixed').addClass('default').fadeOut('fast');
});
}
Instead of fadeIn use fadeOut
The reason for this to happen is this line
$(this).removeClass('fixed').addClass('default').fadeIn('fast');
After you add the class 'default' you use the fadeIn function . jQuery detects that the fadeIn effect is being applied to a element which has display:none and adds a new CSS style to that div which is display: block
There are 2 ways to resolve this.
Jquery Way
Change
$(this).removeClass('fixed').addClass('default').fadeIn('fast');
TO
$(this).removeClass('fixed').addClass('default');
jQuery Way Demo
CSS Way
Change following line in your .default class.
display:none;
TO
display:none !important;
CSS Way Demo
Related
On my page, I have a div element containing copyright information.
I would like to
detect if the user has scrolled all the way to the bottom of the page.
if so, have the div slide down.
It would also be nice if there was a way that JQuery could tell if I am near the box without having to scroll over it to display the copy right as well.
Thanks, DoubleDogg6
It's simple to detect this.
take a look at this jfiddle:
Detect scrolling to the bottom
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
alert("bottom!");
}
});
2.
For sliding down a div read the documentation for .slideDown()
jQuery .slideDown()
If you want jQuery, then this should suffice
$(window).scroll(function(){
if ($(window).scrollTop()+$(window).height() == $(document).height()){
// and now, slideDown
$("#your-div-id").animate({
height: /* whatever your final height should be */
}, 200);
} else if ($(window).scrollTop()+$(window).height() < $(document).height() + 50) {
$("#your-div-id").animate({
height: /* whatever your original height was */
}, 200);
}
});
Of course, you combine the animate function with others to maybe fade in the text or something, and change the speed at which the animation happens, currently 200ms.
You also want your div's overflow-y set to hidden,
#your-div-id {
overflow-y: hidden;
}
Check out this JSFiddle demo.
I have built the prototype that I'll use for my site header, it is basically a simple navigation that on scroll re-appears on screen in a fixed position (sticky nav). I firstly acheived this by having two tags in the markup but ideally I'd liek to acheive this using only one.
Here's my codepen
If you slowly scroll down you should see what I'm trying to achieve here. Heres my javascript:
$(window).scroll(function() {
if ($(this).scrollTop() > 60){
$('.main-header').addClass("sticky-header");
}
else{
$('.main-header').removeClass("sticky-header");
}
if ($(this).scrollTop() > 160){
$('.main-header').addClass("sticky");
}
else{
$('.main-header').removeClass("sticky");
}
});
There is probably a better way of achieving this using a slightly different approach? I don't like the fact I'm testing for two instances of scroll top, only did this because firstly I need a way to apply the positioning of the header, apply the margin value which does the snazzy transition as if it's moving downwards from the top of the page.
Replace Your javascript with the below one: you will get nice scroll
$(window).scroll(function() {
if ($(this).scrollTop() > 0){
$('.main-header').addClass("sticky-header");
}
else{
$('.main-header').removeClass("sticky-header");
}
if ($(this).scrollTop() > 160){
$('.main-header').addClass("sticky");
}
else{
$('.main-header').removeClass("sticky");
}
});
Hi i try to display a div when i scroll to bottom of my page and hide it when its not on the bottom.
The alert message work when at the bottom page but setting css visible or trying with fadeIn or out not work. I need little help to see what i did wrong.
Also on IE 9 the div "#loadSection" its hidden but i still able to put my cursor on it and click when other browser work correctly.
here my code.
$(window).scroll(function() {
if ($(window).scrollTop()+$(window).height() > $(document).height()){
$("#loadSection").fadeTo(0,0).css('visibility','visible');
alert("bottom");
}else{
$("#loadSection").fadeTo(0,0).css('visibility','hidden');
}
});
The problem is that the fadeIn/Out happens with every bit of scroll and it's causing the div to flash. Here's a CSS animated option:
$(window).scroll(function() {
if ($(window).scrollTop()+$(window).height() >= $(document).height()){
$("#loadSection").addClass('visible');
}else{
$("#loadSection").removeClass('visible');
}
});
DEMO:
http://jsfiddle.net/Eh53d/
The visibility property allows an element to remain on the page and take up space. To solve your issue in IE where you're still able to mouse over it, use the display property instead.
To your main issue, try the following:
var loadsection = $("#loadSection");
if ($(window).scrollTop() >= $(document).height() - $(window).height()){
if ( loadsection.is(':hidden') ) loadsection.fadeIn();
}else{
if ( loadsection.is(':visible') ) loadsection.fadeOut();
}
fadeIn and fadeOut will utilize the display property, which will completely remove the element when it's not visible. Also, you're fading to zero opacity in both of your fadeTo calls, so even if though visibility is being set, the element is still completely transparent.
I would like to get a navigation exactly like this website : http://www.interviewmagazine.com/
A navigation bar appears after scrolling down about 700 pixels or so.. its a fixed nav with fade in effect and has a fade out effect when you scroll back to top.
I tried to see how they did their code but i couldnt figure it out.
sounds like mootools tho?
If someone can help that would be awesome. thanks!
You can create such a menu using jQuery and CSS, swapping classes as needed when:
var posit = window.scrollTop();
if (posit == [your designated fadein location]) {
//do something;
}
CSS: position : fixed, opacity : 0, height : 0; overflow : hidden
swap class to change height to fixed amount
animate({opacity : 1.0}, 'fast', function() {
//callback;
});
You'll have to set a listener for when user scrolls, but this should get you started. All you need is jQuery and a browser, a logical approach to cut the project up into manageable parts, and time.
EDIT: Here's your fiddle.
http://jsfiddle.net/lazerblade01/fNn7K/26/
For anyone searching through stackoverflow here is my try:
$(function(){
// Check the initial Poistion of Sticky Header
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$('#stickyheader').css({position: 'fixed', top: '0px'});
$('#stickyheader').css('opacity', '1');
} else {
$('#stickyheader').css({position: 'static', top: '600px'});
$('#stickyheader').css('opacity', '0');
}
});
});
Here is a Fiddle DEMO http://jsfiddle.net/uFq2k/297/
It is a little modified version of this code: how can I stick the div after scrolling down a little
David Walsh has a thing he calls ScrollSpy - much like twitter's scroll spy - only it does a different thing.
the twitter one can react to a particular element of interest coming into view.
walsh's plugin can react and give you events when a user scrolls to a particular threshold and back.
http://davidwalsh.name/mootools-scrollspy
You could try Twitter's Bootstrap. Check out their second toolbar.
ok I have seen people using position:fixed to have a div follow the scroll.
I have also seen the following solution which is good ( Jquery follow scroll ) but I was wondering how I can accomplish 2 effects :
create a smooth scroll for the box
scroll the box inside a div (so if the scroll is higher than the holder div, the box should be on top of the div, and when you scroll down it should scroll inside)
an example of these features can be found here : http://www.limestonenetworks.com/dedicated_servers/order.html?id=47
but I cant figure out what they used and even if they used a library.
As a slight alternative to Adam Hutchinson's
http://jsfiddle.net/HelloJoe/JjuQu/
It's pretty self explanatory but just say if you need anything explained.
This div in the example is not polsition:fixed, or absolute. What they do is to animate the margint-top attribute on scroll relatively
Looks like you need to map an event to the document scrolling and then move a div relative to the scroll. Something along these lines may give you somewhere to start.
$(document).scroll(function(){
$('#divtomove').css('top', $(document).scrollTop());
})
Also, this is the code in the example page, just to get an idea
var $scrollingDiv = $("#customize");
$(window).scroll(function () {
if ($(window).scrollTop() > 490) {
if (($("#maincontentbox").height() - $(window).scrollTop()) > 0) {
$scrollingDiv.stop().animate({
"marginTop": ($(window).scrollTop() - 500) + "px"
}, "slow");
}
} else {
$scrollingDiv.stop().animate({
"marginTop": "0px"
}, "slow");
}
});
Simpler solution:
$('#divtomove').scrollFollow();