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
Related
I have a div that is fixed to the footer of my website that is positioned using CSS and not visible on page load. I would like it to show once the user has scrolled at least 100px down on the page and hide when the user has scrolled back up. I've seen examples here on stackoverflow and other sites that use jquery to do this, but I am looking for a javascript only solution.
I included a jquery version that illustrates what I want to do, but I am not sure how to do this using just javascript.
<style type="text/css">
.footerbar{
position:fixed;
width:100%;
left:0;
bottom:0;
background-color:black;
color:white;
display:none;
}
</style>
<div id="fixed-footer" class="footerbar">some text and images here</div>
<script type="text/javascript">
$(function(){
$(window).scroll(function() {
($(document).scrollTop() + $(window).height()) / $(document).height() > 0.50 ? $('#fixed-footer').fadeIn() : $('#fixed-footer').fadeOut();
});
})
</script>
window.onscroll = function() {
scrollFunction();
}
function scrollFunction() {
if (document.body.scrollTop > 100 ||
document.documentElement.scrollTop > 100) {
document.querySelector('#fixed-footer').style.display = "block";
} else {
document.querySelector('#fixed-footer').style.display = "none";
}
}
Here is the function...then use css to fade-in and fade-out
I've got a logo image that in page load is hidden. I'd like that the image would show after page scroll.
Tried that approach:
CSS:
#logo {
display: none;
}
JS/JQuery:
jQuery( document ).ready(function( $ ) {
$(document).scroll(function() {
var scroll = $(this).scrollTop();
if (scroll >=100){
$('#logo').show();
} else {
$('#logo').hide();
}
});
});
Case 1: if page is loaded with scroll = 0, after page scroll logo image doesn't show.
Case 2: if page is loaded with scroll > 100, logo image is show or hidden correctly.
Your code seems to work fine on scroll. If you just need to also conditionally hide/show the image based on the scroll position when the page loads, you can call the hide/show code when the page loads as well as when you scroll the page.
jQuery(document).ready(function($) {
function hideShow(scroll) {
if (scroll >= 100) {
$('#logo').show();
} else {
$('#logo').hide();
}
}
hideShow($(this).scrollTop());
$(document).scroll(function() {
hideShow($(this).scrollTop());
});
});
body {
height: 500vh;
}
#logo {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" id="logo">
This is my first question here, feel free to tell me if I am not specific enough or whatever I do wrong!
I want a jquery method which change all divs with the class "passive" to height 500 px and passive-->active, so there would be another method which changes the height back to 100px. The first half is working, I got the class changed, but the second animation won't happen. All I have in html is one div with the class of passive.
$("document").ready(function(){
$(function() {
$(".passive").click(function(){
$(this).animate({height:'500px'});
$(this).addClass("active");
$(this).removeClass("passive");
});
$(".active").click(function(){
$(this).animate({height:'100px'});
$(this).addClass("passive");
$(this).removeClass("active");
});
});
});`
jQuery.animate() is costly and choppy. You will get a smoother transition by just toggling the class and using CSS to transition
.passive {
height:100px;
transition:height 1s;
}
.active {
height:300px;
}
Array
.from(document.querySelectorAll('.passive'))
.forEach(
e => e.addEventListener(
'click',
evnt => e.classList.toggle('active')
)
)
.container { display:flex; }
.container>div {
flex:1 auto;
}
.passive {
background-color:red;
margin:5px;
height:100px;
width:20px;
transition:height 1s;
}
.active {
height:300px;
}
<div class="container">
<div class="passive" tabindex=1></div>
<div class="passive" tabindex=2></div>
<div class="passive" tabindex=3></div>
</div>
You are trying to interact with a class added after the DOM loaded. By default, click functions will only work with elements that exist on load. You can either use event delegation or add a base class to the element. If you add a base class, you can simplify the click function.
You can do an if/else to check if the element has a certain class using hasClass. Also, you can chain together the $(this) methods inside the if/else blocks.
$("document").ready(function() {
$(function() {
$("baseclassname").click(function() {
if ($(this).hasClass('passive')) {
$(this).animate({ height: '500px' });
$(this).addClass("active");
$(this).removeClass("passive");
// $(this).animate({ height: '500px' }).addClass('active').removeClass('passive');
} else {
$(this).animate({ height: '100px' });
$(this).addClass("passive");
$(this).removeClass("active");
// $(this).animate({ height: '100px' }).addClass('passive').removeClass('active');
}
});
});
});
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
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>