I have the heading fading out according to the scroll position, however I would like to attach the fadeout to when the user scrolls to the sticky navigation bar to create a better effect.
I tried the following but no luck!
<script>
$(".l-subheader.at_bottom").scroll(function() {
$(".l-titlebar-content").css("opacity", 1 - $(".l-subheader.at_bottom").scrollTop() / 220);
});
</script>
Should be pretty straight forward but I'm a JS novice!
http://scottdavy.co.uk/our-care-plans/
http://scottdavy.co.uk/our-pricing/
Thanks for your help.
Check if the header becomes position:fixed; then apply the fade effect.
<script>
$(".l-subheader.at_bottom").scroll(function() {
if( $(this).css('position') == 'fixed' )
{
$(".l-titlebar-content").css("opacity", 1 - $(".l-subheader.at_bottom").scrollTop() / 220);
}
});
</script>
Try the Following Demo... Smooth Scroll Header & Subheader
https://jsfiddle.net/pratikgavas/D3DDp/38/
JS Code:-
$(window).on("scroll", function(e) {
if ($(window).scrollTop() >= $("#Header").height()) {
$("#Header").fadeOut(500);
$("#SubHeader").css('top','0px');
}else {
$("#Header").fadeIn(500);
$("#SubHeader").css('top','100px');
}
});
Related
I want to animate my navbar to animate to top: 0 on page scroll. Right now my nav is coming after slider image.
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() === 100) { // this refers to window
$('.navbar').animate('top': 0);
} else {
$('.navbar').animate('top': 300);
}
});
})
But this code is not working.
Jquery animate function is wrong
$('.navbar').animate({top: "0px"});
$('.navbar').animate({top: "300px"});
In css you need to have position fixed or absolute
So I have this layout here .
<div class="content">
<div class="direction_left"></div>
<div class="direction_right"></div>
<div class="direction_up"></div>
<div class="direction_down"></div>
</div>
<div id="game">
<div id="pos"></div>
</div>
4 divs, if I hover on top it (should) scroll top, if I hover on bottom it (should) scroll bot, left scrolls left and right scrolls right!
On mouse hover on any of the four divs inside the content will scroll the page accordingly.
Important h_amount is horizontal and v_amount is for vertical
function scroll_h() {
console.log('scrolling left and right'+h_amount);
$('#game').animate({
scrollLeft: h_amount
}, 100, 'linear',function() {
if (h_amount != '') {
scroll_h();
}
});
}
function scroll_v() {
console.log('scrolling up and down'+v_amount);
$('#game').animate({
scrollTop: v_amount
}, 100, 'linear',function() {
if (v_amount != '') {
scroll_v();
}
});
}
and then on hover I call
$('.direction_right').hover(function() {
console.log('scroll right');
h_amount = '+=50';
scroll_h();
}, function() {
h_amount = '';
});
$('.direction_up').hover(function() {
console.log('scroll up');
v_amount = '-=50';
scroll_v();
}, function() {
v_amount = '';
});
FULL fiddle here
The problem, I cannot understand why it does not work for up and down. I think my script is correct so am thinking maybe css which is a general weakness of mine might be wrong :D help!
I think I found my answer, please correct me if I am wrong!
Found this question here which asks why his scrollTop() wont animate, and the answer says that window does not have a scrollTop() property, and to use body or html instead (depends on browser, so use both).
Therefore I think my #game div does not have a scrollTop() property either! So I replaced it with html,body and its now working :D.
*
P.S. Don't really know if its actually working or "working".
*
new fiddle here
Also changed that gradient background because it made me dizzy!
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);
}
I'm designing a nav that has the background bar appear after the user has scrolled down the page a bit. When they scroll back to the top, the bar (background color) disappears. I'm doing it using the instructions over at:
Add/remove class with jquery based on vertical scroll?
It works fine but now I would like to add fading in and out of the bar on scroll. I've tried adding the fadeIn() and fadeOut() methods. Problem is when it fades out, it fades out the whole #nav div! Not just the background colour. Here's the query
$(function() {
//caches a jQuery object containing the header element
var header = $('.noBackground');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
header.removeClass('noBackground').addClass('blackBackground').fadeIn();
} else {
header.removeClass('blackBackground').fadeOut().addClass('noBackground');
}
});
});
Full, HTML, CSS and jQuery on this fiddle
The problem here is your #nav div is hidden when you scroll back to top. It is because the .fadeOut() method hides the matched elements by fading them to transparent. So you you remove .fadeOut() from else condition and it works fine.
Here is the edited code.
$(function() {
//caches a jQuery object containing the header element
var header = $('.noBackground');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
header.removeClass('noBackground').addClass('blackBackground').fadeIn();
} else {
header.removeClass('blackBackground').addClass('noBackground');
}
});
});
Edit:
A simple twist will show the effect:
$(function() {
//caches a jQuery object containing the header element
var header = $('.noBackground');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
if(header.hasClass('noBackground')) {
header.hide();
header.removeClass('noBackground')
.addClass('blackBackground').fadeIn(2000);
}
} else {
if(header.hasClass('blackBackground')) {
header.hide();
header.removeClass('blackBackground')
.addClass('noBackground').fadeIn(2000);
}
}
});
});
Demo Fiddle.
fadeOut() method can be implemented on a jquery element,not on a class..your code is working perfectly fine
I need that when I scroll down or up with mouse wheel or sidebar my div change incrementally the Y position (for example 50px up or down ). I need this in Javascript/Jquery.
I Try this code, but only works for scrolling down(The Scrolling Down and Up Function is working well, only the animate part is working wrong):
UPDATE:
var sidebarScrollTop = 0;
$(document).ready(function() {
sidebarScrollTop = $("body").offset();
$(window).scroll(function ()
{
var docScrollTop = $('body,html').scrollTop();
if(docScrollTop > sidebarScrollTop.top)
{
$("#legend").stop().animate({ marginTop: "+=50px",}, 'slow', "easeOutCirc" );
}
else
{
$("#legend").stop().animate({ marginTop: "-=50px",}, 'slow', "easeOutCirc" );
}
});
});
$(window).resize(function()
{
sidebarScrollTop = $("#legend").offset().top;
});
$(document).resize(function()
{
sidebarScrollTop = $("#legend").offset().top;
});
Thanks
You can use
$(window).scroll(function() {
// Your scroll code here
});
to grab whenever the user is scrolling on the page.
Next you want to change the div's y-value.
If the div is positioned absolute, this is just changing its top-value.
$('my-div').top = original-top-value + $(window).pageYOffset;
I believe you need is to keep the div always showing even when user scrolls down. If that is the case then it can be done with only CSS:
div {
position: fixed;
z-index: 100;
top: 100px;
left: 100px;
}
The values of z-index, top and left are dummy values. Change em with your ones.
UPDATE:
Since CSS Solution won't work for you, here is a working example writter in JS: http://jsfiddle.net/qCtt5/