I ask for help, why my script is not working,
$(window).scroll(function() {
if ($(window).scrollTop() > 1){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});
I tried to replace $(window).scroll(function() { with $(document).ready(function() { ,still does not work
for more details, you can open my page in versbubble.blogspot.com
You can use the following to make it work.
$(document).ready(function () {
if ($(window).scrollTop() > 1) {
$('header').addClass("sticky");
}
else {
$('header').removeClass("sticky");
}
});
Hope I am not too late, I had the same issue lately so I did something like this
$(document).ready(function () {
$(window).scroll(function() {
if ($(window).offset().top > 50){
$('header').addClass("sticky");
}
if ($(window).scrollTop() < 50){
$('header').removeClass("sticky");
}
});
});
Related
I'm trying to hide the navbar on a Wordpress front-page only, and only until the user scrolls a certain amount of pixels, after which the navbar re-appears. All other pages should have a normal, always visible navbar.
I have this code in header.php:
<head>
<script>
(function ($) {
$(document).ready(function(){
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
$('.navbar-bg').css("background-color", "#3d3938");
} else {
$('.navbar-bg').css("background-color", "transparent");
}
});
});
}(jQuery));
</script>
</head>
On its own, the above code works exactly as intended for hiding the navbar, but since the navbar is in header.php, it hides it on all pages.
So I add an if condition that checks if we're on front-page:
<head>
<script>
if ( window.location.pathname == '/' ){
// Front-page
alert('Hello');
$(document).ready(function(){
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
$('.navbar-bg').css("background-color", "#3d3938");
} else {
$('.navbar-bg').css("background-color", "transparent");
}
});
});
} else {
// Other pages
console.log(window.location.pathname);
}
</script>
</head>
the condition works, as the alert() is shown only on front-page, but the hide/scroll effect no longer works. I'm guessing I am not properly inserting the code into the if condition, I've tried like a million combinations but nothing works. Please help.
You didn't reference JQuery as $.
Do the following:
<head>
<script>
(function ($) {
if ( window.location.pathname == '/' ){
// Front-page
alert('Hello');
$(document).ready(function(){
$(window).scroll(function () {
if ($(this).scrollTop() > 400) {
$('.navbar-bg').css("background-color", "#3d3938");
} else {
$('.navbar-bg').css("background-color", "transparent");
}
});
});
} else {
// Other pages
console.log(window.location.pathname);
}
}(jQuery));
</script>
</head>
i want show a div after scrolling 150px just in mobile devices.
this is my code but it doesnt work :
$(document).load($(window).bind("resize", checkPosition));
var phonebox = $(".phonebox");
function checkPosition()
{
if($(window).width() < 460)
{
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
phonebox.show();
}
else {
phonebox.hide();
}
});
}
}
can somebody help me to fix this problem.
thank you
You should not use bind but on instead. And use both resize and load in the same function.
bind is an old version of new added on see here > bind vs on
See jsfiddle
or snippet below ( i used 700 for example purposes only. so it works in snippet )
$(window).on("load resize", checkPosition)
var phonebox = $(".phonebox");
function checkPosition() {
if ($(window).width() < 700) {
$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$(phonebox).show();
} else {
$(phonebox).hide();
}
});
}
}
.phonebox {
top:200px;
height:300px;
width:100px;
position:absolute;
background:red;
display:none;
}
.for_scroll {
height:1000px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="phonebox">
</div>
<div class="for_scroll">
</div>
Please try this one,
$(function(){
$(window).scroll(function (event) {
var scroll = $(window).scrollTop();
if(scroll >= 150){
phonebox.show();
}else{
phonebox.hide();
}
});
});
you can try this one as show() and hide() functions are not supported by some of the browsers so this could be a reason.
To hide:
$(".phonebox").css("display", "none");
To show:
$(".phonebox").css("display", "block");
I have made this jQuery script. Its purpose is to add a class to <body> when body is scrolled a certain amount. However nothing happens on scroll. DOM console doesnt show any error messages. I am a complete Javascript-newbie, so I would not be surprised if the problem is a simple markup mistake.
Any help is appreciated.
jQuery(document).ready(function() {
if ((window.screen.width / window.screen.height) >= 1.33){
$(document.body).on('scroll', function(e) {
if ($(this).scrollTop() > 200) {
$(document.body).addClass('fix');
} else {
$(document.body).removeClass('fix');
}
});
};
});
body{
height:200vh;
background-color:blue;
}
.fix{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
you want to listen to scroll event on window
Try
jQuery(document).ready(function() {
if ((window.screen.width / window.screen.height) >= 1.33) {
$(window).on('scroll', function(e) {
if ($(this).scrollTop() > 200) {
$('body').addClass('fix');
} else {
$('body').removeClass('fix');
}
});
};
});
I am trying to animate some divs after the user scrolls to a specific position on the page. the problem is that i want it to happen only once. I used Boolean flags but it doesn't seem to like it.
What are u all suggest me to do?
::the code Its not even running
FYI I don't want to use PHP
var once = false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 && once == false) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
once = true;
}
)};
Thanks!
From your question
after the user scrolls to a specific position on the page
Listen to scroll event
$(document).ready(function() {
var once = false;
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760 && once==false){
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);
});
once=true;
}
});
)};
Alternative from comments. Check if element has a class (or attribute) or not. Below code checks if the element has the data-noanimate attribute. If yes it will not animate, if not it will animate and add data-noanimate so that it will animate once.
$(document).ready(function() {
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760){
$('.hash').each(function(i) {
if($(this).attr('data-noanimate') === undefined){
$(this).attr('data-noanimate','true').fadeOut(0).delay(1000*i).fadeIn(1000);
}
});
}
});
)};
var once=false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 &&once==false)
{
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);});
once=true;
}
});
Your brackets on the end of the ready function were flipped.
The other answer is correct, but it can be better like this:
$(function() {
$(window).on('scroll', function(){
if ($(window).scrollTop() > 760) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
// without boolean value,you can off `scroll` event
$(window).off('scroll');
}
})
});
I had a code here jsfiddle. I can't make it scroll fixed after 200 scroll.
$(window).load(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 200) {
$('navbar').css('position', 'fixed');
$('navbar').slideDown();
} else if ($(this).scrollTop() <= 200) {
$('navbar').removeClass('position', 'relative');
$('navbar').slideUp();
}
});
});
You need to add . in navbar since it is a class and change the first line to $(function () {
No need to execute a load function in your code when you are using onload event already.
Also, as mentioned in the comments:
Change:
$('.navbar').removeClass('position', 'relative');
To:
$('.navbar').css('position', 'relative');
Try this:
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 200) {
$('.navbar').css('position', 'fixed');
$('.navbar').slideDown();
} else if ($(this).scrollTop() <= 200) {
$('.navbar').css('position', 'relative');
$('.navbar').slideUp();
}
});
});
JSFiddle Demo
Not .removeClass this one is .css
Try
$('.navbar').css('position', 'relative');
instead of
$('.navbar').removeClass('position', 'relative');