Hiding navbar on front-page with jQuery in Wordpress - javascript

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>

Related

jQuery script not activating

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');
}
});
};
});

add / remove class in jquery window scroll function not working - blogger

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");
}
});
});

Animate some divs only once

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');
}
})
});

jquery fixed header after 200 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');

Remove vertical scrollbar on fullscreen?

I want to remove vertical scrollbar after switch to fullscreen.
This is the script I'm using at the moment:
<script type="text/javascript">
if((window.fullScreen) || (window.innerWidth == screen.width && window.innerHeight == screen.height)) {
$("html").css("overflow", "hidden");
} else {
$("html").css("overflow", "auto");
}
</script>
I've tried like this without any success:
<script type="text/javascript">
if(window.fullScreen) {
$("html").css("overflow", "hidden");
} else {
$("html").css("overflow", "auto");
}
</script>
Tank you as always.
EDIT:
<script type="text/javascript" src="jquery.js"></script> is being loaded and other jquery script's are working ok.
EDIT:
I've tested with:
$(document).ready(function() {
$("body").css("overflow", "hidden");
});
And it works!
So I believe that for some reason the JavaScript condition code it's not working!
if((window.fullScreen) || (window.innerWidth == screen.width && window.innerHeight == screen.height))...
EDIT:
Solution found!
<script type="text/javascript">
var control = 0;
function scrollbar(){
if(event.keyCode == 122 && control == 0){
//remove scrollbar
$("body").css("overflow", "hidden");
control = 1;
}
else{
//add scrollbar
$("body").css("overflow", "auto");
control = 0;
}
}
</script>
If you want to use this don't forget to attach the function to the body for example like:
<body onkeydown="scrollbar();">
UPDATE:
Work's in chrome, opera, ie, safari except for firefox! What can be done to fix firefox?
It looks like the javascript is only being run once, when the document loads, and not re-evaluate afterwards. If this is the only problem, you should see the correct behaviour if you are in full screen then load the page. To fix this you will have to make a function out of your code and call it every time the window is resized. Using jQuery, you can do this using an anonymous function:
<script type="text/javascript">
$(window).resize(function() {
if((window.fullScreen) || (window.innerWidth == screen.width && window.innerHeight == screen.height)) {
$("html").css("overflow", "hidden");
} else {
$("html").css("overflow", "auto");
}
});
$(document).ready(function(){
$(window).resize();
// trigger the function when the page loads
// if you have another $(document).ready(), simply add this line to it
});
</script>
This binds the function to the resize event handler and you should see correct results! If that works it will be a much nicer and robust way of doing it.

Categories

Resources