By default I have a navigation bar which has a red background color.
What I want to do is when the users scrolls down more than 100px to change the background to blue and if he goes back to 0px to change the background to it's default state.
I want to do this by toggling between two classes, for example <div class="navigation red"> should be the default class and if the user scroll down to add <div class="navigation blue"> and if he scrolls back to have <div class="navigation red"> again.
Here is my attempt :
$(document).ready(function(){
$(window).scroll(function(){
if ($(window).scrollTop() > 100){
$('.navigation').toggleClass( "blue");
}
});
});
But this is not working. Here's a jsbin.
Any ideas how to get it to work ?
Try the following code:
$(document).ready(function () {
$(window).scroll(function () {
$('.navigation').toggleClass("blue", ($(window).scrollTop() > 100));
});
});
Here's the example in jsbin
Using toggleClass() may be the wrong solution for this. Use addClass/removeClass instead:
if ($(window).scrollTop() > 100){
$('.navigation').addClass( "blue");
}
else {
$('.navigation').removeClass("blue");
}
You can use .addClass() and removeClass()like this one: http://jsfiddle.net/csdtesting/qhfmw8hx/
$(window).scroll(function() {
var windowYmax = 100;
var scrolledY = $(window).scrollTop();
if (scrolledY > windowYmax) {
$('.navigation').addClass("blue");
} else {
$('.navigation').removeClass("blue");
$('.navigation').addClass("red");
}
});
.navigation {
height: 800px;
}
.navigation.red {
background: red;
}
.navigation.blue {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation red">scroll me down and up please to see me changing colors...</div>
Hope it helps!
The problem is that you call toggleClass everytime the user scrolls. This code would fix this issue:
$(document).ready(function(){
$(window).scroll(function(){
if ($(window).scrollTop() > 100 && !$( ".navigation" ).hasClass( "blue" ) || $(window).scrollTop() === 0 && $( ".navigation" ).hasClass( "blue" ){
$('.navigation').toggleClass( "blue");
}
});
});
The jsbin
You're working with adding a class and removing another, i would suggest just using addClass and removeClass for this case. Also you can chain the methods.
$(document).ready(function(){
$(window).scroll(function(){
if ($(window).scrollTop() > 100){
$('.navigation').addClass('blue').removeClass('red');
} else {
$('.navigation').addClass('red').removeClass('blue');
}
});
});
Here's the jsbin
Related
I'm working on a navbar whichs swaps classes to fade the background in and out.
I've targeted the window itself and listen to the scroll, determining on how far down the user is at the page, if the user if further down than 800px, the navbar should fade out, if the user scrolls back up to the top, the navbar should fade in again
This is what I have:
Javascript:
$(window).scroll(function() {
if ($(this).scrollTop() > 800) {
$( "#nav" ).removeClass('.menuOut', 500);
$( "#nav" ).addClass('.menuIn', 500);
} else {
console.log('there');
$( "#nav" ).removeClass('.menuIn', 500);
$( "#nav" ).addClass('.menuOut', 500);
}
});
</script>
Navbar:
<nav id="nav" class="navbar menuIn">
<!--Content-->
</nav>
CSS:
.menuIn {
background-color: rgba(50,50,50,50.3);
}
.menuIn {
background-color: rgba(50,50,50,1);
}
(example of what I mean: http://www.albdifferent.com/)
Try with this below code it may help you.
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 800) {
$("#nav").removeClass("menuOut");
$("#nav").addClass("menuIn");
} else {
$("#nav").removeClass("menuIn");
$("#nav").addClass("menuOut");
}
});
Is it possible to add a class to a link inside a li element when a certain part of the page is active?
I have a one page website and would like to change the color of the link when that specific part of the page is reached via scroll.
Here's my HTML:
<header id="header">
<section class="container">
<nav>
<a class="logo" href="index.html">Logo</a>
<div id="menu">
<ul id="links">
<li>Services</li>
<li>About</li>
<li>Clients</li>
<li class="last">Contact</li>
</ul>
</div>
</nav>
</section>
</header>
And here's the CSS:
#menu li a {
color:#7a7a7a;
text-decoration: none;
font-size: 12px;
margin-right:20px;
}
#menu li.last a {
color:#7a7a7a;
text-decoration: none;
font-size: 12px;
margin-right:0px;
}
#menu li.current a {
color: #0086be;
}
What I would like to do is to add the class .current to the link inside the li element whenever that specific part of the page is reached.
I believe this is only possible with Javascript, can anyone point me the right path to achieve this?
Thanks in advance
I think you want something like scrollspy in bootstrap,
you can use it or you can find https://gist.github.com/pascaldevink/2380129 bypascaldevink
or here is the fiddle http://jsfiddle.net/ia_archiver/Kb7xq/
You will require jquery for this,
$.fn.scrollspy = function ( option ) {
return this.each(function () {
var $this = $(this)
, data = $this.data('scrollspy')
, options = typeof option == 'object' && option
if (!data) $this.data('scrollspy', (data = new ScrollSpy(this, options)))
if (typeof option == 'string') data[option]()
})
}
$.fn.scrollspy.Constructor = ScrollSpy
$.fn.scrollspy.defaults = {
offset: 10
}
$(function () {
$('[data-spy="scroll"]').each(function () {
var $spy = $(this)
$spy.scrollspy($spy.data())
})
})
}(window.jQuery);
Using hover function you can achieve this.i.e. on hover of specific part of the page you add the class to the link present inside the li. e.g.
$('#specificPartOfPageId').hover(function(){
$('#links').children().children('a').addClass('current');
});
This would add .current class to every link present inside that UL element.
Hope this helps.
If I have understood correctly, I guess this is what you require: jsFiddle. The CSS and the HTML code remains the same and this is the jQuery code which I've used:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 500) {
$("#links li:first-child").addClass("current");
}
if (scroll > 750) {
$("#links li:first-child").removeClass("current");
$("#links li:nth-child(2)").addClass("current");
}
var scrollBottom = $(window).scrollTop() + $(window).height();
if (scroll < 500) {
$("#links li:first-child").removeClass("current");
}
if (scroll < 750) {
$("#links li:nth-child(2)").removeClass("current");
}
});
Basically what happens is that when you scroll down to 500px, the li:first-child is automatically assigned the current class. You can modify the jQuery to suit your needs by adding more if queries as per your needs. You can target different <li>'s in your list using different child-selectors like li:first-child, li:nth-child(2) etc.
I want to hide my Bootstrap-Navbar on the first section of my one-page site and fade it in when scrolled past this first section.
I tried using the jQuery .hide() effect, telling it to hide the navbar when scrollTop is < 300px and fade it in below - this works fine but the first time the page loads the navbar is not hidden, just after I scrolled down the first time and I can't figure out why.
Here is my code :
$('#wrapper').scroll(function(){
if($(this).scrollTop() < 300) $('#navbar').hide('easing');
if($(this).scrollTop() > 300) $('#navbar').fadeIn('slow');
});
Here is the jsfiddle
How can i do this ?
I think it's becuase the #navbar element is not initially hidden.
Just hide it using css:
#navbar {
height:50px;
background-color:green;
position:fixed;
top:20px;
width:100%;
display: none;
}
Demo: http://jsfiddle.net/Ub4xm/17/
You should set the bar to hide on startup, either in CSS (clean) or in HTML (quick-and-dirty).
The jQuery's .hide() sets the display to "none" if I'm correct, so set the display on page load to "none", since .fadeIn() will set the display to "block".
add display to none:
#navbar {
height:50px;
background-color:green;
position:fixed;
top:20px;
width:100%;
display:none; /* <--add this*/
}
or in your js you can trigger your .scroll() in the doc ready:
$(document).ready(function () {
$('#wrapper').scroll(function () {
if ($(this).scrollTop() < 300) {
$('#navbar').hide('easing');
} else if ($(this).scrollTop() > 300) {
$('#navbar').fadeIn('slow');
}
}).scroll(); // <-----trigger it here first.
});
The above code let you see the hide with easing when doc is ready.
first hide #navbar in load time .
$( document ).ready(function() {
$('#navbar').hide();
$('#wrapper').scroll(function(){
if($(this).scrollTop() < 300) $('#navbar').hide('easing');
if($(this).scrollTop() > 300) $('#navbar').fadeIn('slow');
});
});
demo
Try with this
HTML
<div id="navbar" style="display:none">Teasers Div</div>
Script
$( document ).ready(function() {
$('#wrapper').scroll(function(){
if($(this).scrollTop() > 300)
$('#navbar').fadeIn('slow');
else
$('#navbar').hide('easing');
});
});
DEMO
I believe that it's a very small tweak to make it work...
I need to switch between fixed to relative position.
JSFiddle
$(window).on('scroll', function() {
($(window).scrollTop() > 50) ? ($('.me').addClass('fixed')) : ($('.me').removeClass('fixed'))
};
.fixed {
position: fixed;
top: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br><br><br><br><br><br><br><br><br>
<div class="me">123</div>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
Where is the exact bug?
This is working fine for me.....
$(window).on('scroll', function () {
($(window).scrollTop() > 50) ? $('.me').addClass('fixed') : $('.me').removeClass('fixed');
});
may be some brackets missing... and if you want to put css directly with jquery use .css();
working Fiddle
jQuery
function showDiv() {
if ($(window).scrollTop() > 100) {
$('.lock').fadeIn('slow');
} else {
$('.lock').fadeOut('slow');
});
}
$(window).scroll(showDiv);
showDiv();
HTML (.lock { display: none; position: fixed; })
<div class="lock">
Text
</div>
I'm trying to get a hidden fixed div to appear when you scroll to a certain part of the page, and to disappear when you scroll back up. What am I doing wrong?
looks like a syntax issue
function showDiv() {
if ($(window).scrollTop() > 100) {
$('.lock').fadeIn('slow');
} else {
$('.lock').fadeOut('slow');
}//); <-- drop this close parenthesis/semicolon
}
jsfiddle example
please test this:
put styles in the div.lock element.
<div class="lock" style="display: none; position: fixed;">
Text
</div>