Display on scroll - javascript

I'm struggling to get the following code working. Basically I'm trying to get .cbp-fbscroller in my css to make my new navigation menu on the side in the html page only appear at 900px on scroll down, but being new to JavaScript I don't know how to get the code working.
So once it reaches 900px the navigation on the side will appear. I have made a fiddle so you guys can see more of the code
Demo
$(document).scroll(function(){
if ($(document).scrollTop() >= 100) {
if ($(".main").css('display') === 'none') {
$(".cbp-fbscroller").fadeIn('slow');
$(".main").prev().fadeOut();
$(".cbp-fbscroller").next().fadeOut();
}
} else {
/* if ($(".main").css('display') !== 'none') {
$(".cbp-fbscroller").fadeOut('slow');
$(".main").prev().fadeIn();
$(".cbp-fbscroller").next().fadeIn();
} */
}
})

If I correctly understod your question, basicly you need this:
$(function() {
$(window).on('scroll', function() {
if ($(window).scrollTop() >= 900) {
$('.cbp-fbscroller nav').fadeIn('slow');
} else {
$('.cbp-fbscroller nav').fadeOut('slow');
}
});
});
fiddle: http://jsfiddle.net/6oaxt61a/10/
and a change in your HTML
<nav>
to
<nav style="display:none;">

If I get what you are trying to do correctly, your code should be looking something like this:
$(document).scroll(function(){
if ($(document).scrollTop() >= 100) {
if ($(".main").css('display') === 'none') {
$(".cbp-fbscroller").fadeIn('slow');
$(".main").prev().fadeOut();
$(".cbp-fbscroller").next().fadeOut();
}
} else {
/* if ($(".main").css('display') !== 'none') {
$(".cbp-fbscroller").fadeOut('slow');
$(".main").prev().fadeIn();
$(".cbp-fbscroller").next().fadeIn();
} */
}
})
The part I comment out is just incase you want to revert the action.
What you are lacking:
No event attached. That was fixed by $(document).scroll(function(){...
'"foobar"' will only raise an error. use either 'foo' or "bar"
Hope I interpret you correctly.

Related

Detect resize and execute code at X resolution in JQuery

I want the following:
Detect page width on load and add/remove class if it's below/above 959px
If I resize the page I want to do the same
$(window).on("resize load", function(e) {
e = $("body").width();
if (e <= 959) {
$("#button").addClass("active")
}
if (e >= 960) {
$("#button").removeClass("active")
}
})
This code works, but it removes the active class even if I resize the window from 500px to 501px. I want that to only add the class if I go above 960px or remove it if I go below 959px. How can I do that?
EDIT
Thanks for the answers! In the meantime I figured out a solution that works and suit my needs.
$(window).one("load", function () {
r = $("body").width();
if (r >= 960) {
$("body").attr("mobile","0")
//do something
}
if (r <= 959) {
$("body").attr("mobile","1")
//do something
}
});
$(window).on("resize", function() {
r = $("body").width();
if ($("body").attr("mobile") == "0") {
if (r <= 959) {
//do something
$("body").attr("mobile","1")
}
}
if ($("body").attr("mobile") == "1") {
if (r >= 960) {
//do something
$("body").attr("mobile","0")
}
}
})
Explanation:
It's a very specific solution since I modify the tabindex values in mobile view and I don't want to change these values back to 0 on a simple resize, only in the case I switch from mobile view to desktop.
The width of the window is different than the width of the body. Using $('body').width() will account for the overflow, whereas using $(window).width() will give you the actual screen width.
$(window).on('load resize', function() {
$('#button').toggleClass('active', $(this).width() <= 959)
});
However, using media queries is much more straight forward if in fact, you are just adding CSS properties.
#button {
opacity: 0.5;
}
#media (max-width: 959px) {
#button {
opacity: 1;
}
}
You could ouse window.matchMedia for this. If you look at the perf test, matchMedia is a lot faster than resize.
var mq = window.matchMedia("(min-width:959px)");
// onload
setButton(mql);
// add listener for the query
mq.addListener(setButton);
function setButton(mq) {
if (mql.matches) {
// do something with your setButton
} else {
// no match....
}
}
Here you go with a solution https://jsfiddle.net/hLkv1xan/1/
$(window).on("resize load", function(e) {
e = $("body").width();
if (e <= 959) {
$("#button").addClass("active")
} else {
$("#button").removeClass("active")
}
});
.active{
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">
Submit
</button>
I just modified your code a bit, change in the condition.
Hope this will help you.

Navbar fade In when back to top

I was trying this jQuery example
(function ($) {
$(document).ready(function(){
// hide .navbar first
// $(".masthead").hide();
$(".masthead").css("background-color","inherit");
// fade in .navbar
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 600) {
$('.masthead').fadeIn();
$(".masthead").css("background-color","black");
} else if($(this).scrollTop === 0){
$('.masthead').fadeIn();
} else {
$('.masthead').fadeOut();
}
});
});
});
}(jQuery));
It shows the menu/navbar when I run the page and disapears when I start scrolling and after 700 pixels navbar is displayed again with black background, I expected it to fade in again after I come back to the top.
if($(this).scrollTop === 0){
$('.masthead').fadeIn();
}
But it have not worked. How do scrollTop() work then? I have also tried to set scrollTop < 10, but with no success. How do I make it work when I'm back at 10 pixels or zero?
You're comparing the function body to 0, not the actual results of the function (the scroll value), so this:
if($(this).scrollTop === 0){
$('.masthead').fadeIn();
}
should become this:
if($(this).scrollTop() === 0){
$('.masthead').fadeIn();
}
TL;DR
It's scrollTop vs. scrollTop().

Why my fix menu in not working smoothly on scrolling.

$(window).scroll(function() {
var windscroll = $(window).scrollTop();
if (windscroll >= 5) {
$('#page-header').addClass('fixed');
} else {
$('#page-header').removeClass('fixed');
}
}).scroll();
Why my fix menu in not working smoothly on scrolling. i am using in my moodle theme frontpage.php or i have to add some thing for smoothness.
You're modifying the DOM too frequently, as $(window).scroll fires multiple times in a single scroll. Consider checking the existence of the class before add or remove it.
$(window).scroll(function() {
var windscroll = $(window).scrollTop();
if (windscroll >= 5) {
if(!$('#page-header').hasClass('fixed')) {
$('#page-header').addClass('fixed');
}
} else {
if(!$('#page-header').hasClass('fixed')) {
$('#page-header').removeClass('fixed');
}
}
});
also, I removed an extra .scroll() call at the end of the script.
Alternatively, you can make use of a jQuery On Screen plugin which will add a pseudo class :onscreen with the div visible in the browser. Codes are as follow:
$(document).scroll(function() {
if($("#page-header").is(':onScreen')) {
console.log("Element appeared on Screen");
if(!$('#page-header').hasClass('fixed')) {
$('#page-header').addClass('fixed');
}
} else {
console.log("Element not on Screen");
if(!$('#page-header').hasClass('fixed')) {
$('#page-header').removeClass('fixed');
}
}
});
See if the plugin fits your needs.

Detect when document is not at top

I want to apply a class once the document isn't at top anymore, i.e. when the user scrolls down. Could someone explain why this isn't working:
if ($(window).scrollTop() != 0) {
// Do stuff
};
For clarification reasons, here's the functionality I'm looking for (the appearing border-bottom on the header): http://doodle.com/bspuhf6cazqpwhwi
window.scrollY is your friend.
function checkScroll() {
if(window.scrollY > 0) {
// add classname
} else {
setTimeout(checkScroll, 300) // check again after 300ms
}
}
checkScroll()
$(window).scroll(function() {
if ($(window).scrollTop() > 0) {
// Do stuff
} else {
// Do other stuff
}
});

How can I launch a JavaScript or jQuery event when I reach the top of my page?

I have a simple problem, but I can't find the solution ...
I just want to launch an event (which execute a method) when I scroll my page up and I "touch" the top of it. I'm using JavaScript and jQuery in my page. Thanks in advance !
You should use the scroll event for that purpose:
$(window).scroll(function() {
if ($(this).scrollTop() == 0) {
//Do whatever you want to do
}
});
One thing you should notice is that this way when somebody scrolls to top continuously the even will be fired although you only want it once the top is hit, for this you can define the event handler as a function and put the last scrolltop value into a function local variable.
$(window).scroll(handleHitTop);
function handleHitTop(event) {
var currentScrollTopValue = $(this).scrollTop();
if (handleHitTop.lastTop === undefined) {
handleHitTop.lastTop = currentScrollTopValue ;
return;
}
if (handleHitTop.lastTop == 0 && currentScrollTopValue == 0) {
return;
}
handleHitTop.lastTop = currentScrollTopValue;
if (handleHitTop.lastTop == 0) {
//Call your event here
}
}
Use the onscroll event. Vanilla js example:
window.onscroll = function() {
if(document.body.scrollTop == 0) {
alert('yay!');
}
}
http://jsfiddle.net/kuWuf/
Use a .scroll() handler and .scrollTop():
$(window).scroll( function() {
if($(this).scrollTop() == 0) {
alert("Top!!!");
}
});
http://jsfiddle.net/jtbowden/wvJ9r/

Categories