Is there anyway of removing an if statement after it has been fired once?
I have a menu container that shows on page load and want it so when the user scrolls 1px it slides away. I don't though want a the browser constantly tracking a scrollTop() method because of the performance hit from this.
What's the best way to remove or cancel an if statement after it has been used once?
The code is below and I have a codepen here: http://codepen.io/emilychews/pen/evbzMQ
jQuery(document).ready(function($) {
$(window).scroll(function() {
if ($(document).scrollTop() > 1) {
$('.menubox').css('left', '-25%');
}
});
$('.mybutton').on('click', function() {
$('.menubox').css('left', '0%');
});
});
body {
margin: 0;
padding: 0;
height: 200vh;
}
.menubox {
top: 100;
position: fixed;
width: 20%;
height: 100%;
background: red;
padding: 10px;
color: white;
transition: all 1s;
}
.mybutton {
position: fixed;
left: 40%;
top: 50px;
padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menubox">Menu Box</div>
<button class="mybutton">menu</button>
Sounds like you actually have two conditions. One is based on the scroll position, the other is based on some state to be tracked. So just add a variable to track that state. Maybe something like:
var scrolled = false;
$(window).scroll(function() {
if ( !scrolled && $(document).scrollTop() > 1) { // check the state
$('.menubox').css('left', '-25%');
scrolled = true; // update the state
}
});
$('.mybutton').on('click', function() {
$('.menubox').css('left', '0%');
scrolled = false; // don't forget to reset the state
});
You can call off() within the if statement to remove the event handler.
Also note that if you're concerned about performance you can debounce the event handler so that it only executes the logic once scrolling stops for N ms:
var scrollTimer;
$(window).scroll(function() {
clearTimeout(scrollTimer)
scrollTimer = setTimeout(function() {
if ($(document).scrollTop() > 1) {
$('.menubox').css('left', '-25%');
$(window).off('scroll');
}
}, 150);
});
Related
I want the nav to hide scrolling down 60px and to show when scrolling up 60px, no matter in which part of the page.
I did this, but it's incomplete, what am I missing?
<script>
let y = 0;
</script>
<svelte:window bind:scrollY="{y}" />
<nav class:hideNav={y > 60}>
<ul>
<li>link</li>
</ul>
</nav>
<style>
nav {
position: fixed;
top: 0;
}
.hideNav {
top: -70px;
}
</style>
Your code seems to perfectly hide the navbar after you scroll the specified amount, here is a REPL of your code in action. maybe the body of your content has no scroll ?
here is another implementation REPL that further elaborates how to use scrolling position
<script>
import {onMount, onDestroy} from 'svelte'
const scrollNavBar = 60
let show = false
onMount(() => {
window.onscroll = () => {
if (window.scrollY > scrollNavBar) {
show = true
} else {
show = false
}
}
})
onDestroy(() => {
window.onscroll = () => {}
})
</script>
<style>
.scrolled {
transform: translate(0,calc(-100% - 1rem))
}
nav {
width: 100%;
position: fixed;
box-shadow: 0 -0.4rem 0.9rem 0.2rem rgb(0 0 0 / 50%);
padding: 10px;
transition: 0.5s ease
}
:global(body) {
margin: 0;
padding: 0;
height: 200vh;
}
</style>
<nav class:scrolled={show}>
elemnt
</nav>
In your REPL, it seems like the nav does not reappear on scrolling up. It does appear only at the top of the page.
I am also trying to show the nav when the user scrolls up by 30px anywhere on the page, for instance. I think that it was what OP is asking as well.
I found a REPL successfully doing it with jQuery but I am struggling to make it work in Svelte at the moment. Any clue?
I will revert back if I succeed.
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();
$(window).scroll(function(event){
didScroll = true;
});
setInterval(function() {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
// Scroll Down
$('header').removeClass('nav-down').addClass('nav-up');
} else {
// Scroll Up
if(st + $(window).height() < $(document).height()) {
$('header').removeClass('nav-up').addClass('nav-down');
}
}
lastScrollTop = st;
}
The answers here couldn't help me. So here's a REPL I made for what I'm using to achieve this in svelte:window.
How I did it;
Create a variable that will store the scroll position (in px) at the end of the scroll event - [let's call it lastScrollPosition].
let lastScrollPosition = 0
At the beginning of a scroll event; inside svelte:window, get and compare the current scroll position to the last scroll position variable we created in [1.] (lastScrollPosition)
<svelte:window on:scroll={()=>{
var currentScrollposition = window.pageYOffset || document.documentElement.scrollTop; //Get current scroll position
if (currentScrollposition > lastScrollPosition) {
showNav = false
}else{
showNav = true
}
lastScrollPosition = currentScrollposition;
}}></svelte:window>
If current scroll Position is greater than lastScrollPosition, showNav is false else, true.
NB: You can use CSS or Svelte Conditional ({#if}) to achieve the hide on scroll down and show on scroll up (This example shows CSS..).
<main>
<div class="nav {showNav == true? "show": "hide" }" >
Nav bar
</div>
<div class="content">
Content
</div>
</main>
<style>
.nav{
background-color: gray;
padding: 6px;
position: fixed;
top: 0;
width: 100%;
}
.content{
background-color: green;
margin-top: 25px;
padding: 6px;
width: 100%;
height: 2300px;
}
.hide{
display: none;
}
.show{
display: unset;
}
</style>
I have a header with a logo. This logo should appear only if the site has been scrolled.
I tried this in javascript:
if(document.getElementById("div").scrollTop != 0){
document.write("<img src='logo.jpg'>");
}
But this did not work.
How to achieve it?
Use window.addEventListener('scroll', callback) and then set the value "block" to the img's property.
window.addEventListener('scroll', function(e) {
if (document.getElementsByTagName("html")[0].scrollTop > 5) {
document.getElementsByClassName('imgHeader')[0].style.display = "block";
} else {
document.getElementsByClassName('imgHeader')[0].style.display = "none";
}
});
.imgHeader {
height: 100px;
width: 100px;
display: none;
}
div {
height: 1000px;
}
header {
position: fixed;
top: 0;
width: 100%;
}
<header><img class="imgHeader" src="https://material.angular.io/assets/img/examples/shiba1.jpg" /></header>
<div></div>
Try this one
$(document).on("scroll", function() {
if ($(document).scrollTop() > 5) {
$(".below-top-header").addClass("show-class");
} else {
$(".below-top-header").removeClass("show-class");
}
});
.content {
height: 500px;
}
.show-class {
position: fixed;
display: block !important;
}
.hide-class {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
<div class="below-top-header hide-class">
Image
</div>
</div>
Unfortunately, I think you must use some JavaScript to make it work like you want.
Here is an easy snippet to show the principle I used:
Start with the logo already in the html, but with display: none in its CSS,
Use window.addEventListener('scroll', callback) to change display: none to display: block when the page is scrolled down (i.e. document.documentElement.scrollTop > 0).
var logo = document.getElementById('logo');
window.addEventListener('scroll', function(e) {
if (document.documentElement.scrollTop > 0) {
logo.style.display = 'block';
}else logo.style.display = 'none';
});
#logo {
display: none;
position: fixed;
top: 0;
background: #aaa;
}
#page {
background: #ddd;
height: 2000px;
}
<div id='logo'><img src='http://placekitten.com/200/50'></div>
<div id='page'>Start of page<br>Try to scroll down</div>
Hope it helps.
You need to add an scrollListener to the window in order to execute code when the user scrolls.
Your code only gets executed on page load.
Informations on Eventlisteners: https://developer.mozilla.org/de/docs/Web/API/EventTarget/addEventListener
window.addEventListener('scroll', function(e) {
//do something as soon as the window was scrolled
});
Be aware that the event will be triggered each time the user scrolls.
What I need to do to change the colour of my nav bar when I scroll down by a certain amount and reset when I scroll back up. I have tried many different techniques. AKA youtube videos on the subject. But cannot seem to get it to work! I have a 'scrolled' class in my CSS stylesheet with a background color set. But it won't even take my function.
$(function(){
$(window).scroll(function() {
if($(window).scrollTop() >= 100) {
$('.nav').addClass('scrolled');
}else {
$('.nav').removeClass('scrolled');
}
});
});
Google Chrome Dev-Files
//$(function(){
$(window).scroll(function() {
if($(window).scrollTop() >= 100) {
$('.nav').addClass('scrolled');
}else {
$('.nav').removeClass('scrolled');
}
});
//});
.nav {
max-width: 500px;
height: 1000px;
}
.nav.scrolled {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
</div>
THANKS SO MUCH!
Not sure what the outermost $(function() {... does, but I think that was the reason the snippet inside did not run.
//$(function(){
$(window).scroll(function() {
if($(window).scrollTop() >= 100) {
$('.nav').addClass('scrolled');
}else {
$('.nav').removeClass('scrolled');
}
});
//});
.nav {
max-width: 500px;
height: 1000px;
}
.nav.scrolled {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
</div>
If you intended to use IIFE, immediately invoked function expression, you can do
(function(){
$(window).scroll(function() {
if($(window).scrollTop() >= 100) {
$('.nav').addClass('scrolled');
}else {
$('.nav').removeClass('scrolled');
}
});
}());
which also works.
This describes how to implement this in Vanilla JS, also taking care of performance using passive event listeners.
Codepen Links
let navRef = document.querySelector('nav');
document.addEventListener('scroll', () => {
if (window.scrollY > 500) {
navRef.classList.add('scrolled');
} else {
navRef.classList.remove('scrolled');
}
}, { passive: true })
body {
margin: 0;
}
div.container {
background: aliceblue;
height: 10000px;
}
nav {
height: 50px;
background: pink;
position: fixed;
width: 100vw;
transition: background 0.3s ease-in-out;
}
nav.scrolled {
background: #80deea;
}
<div class="container">
<nav></nav>
</div>
I have made a page (on Shopify) and I made there a fixed "go to top" arrow on the left bottom. It's okay, but when I scroll to the page bottom the arrow is will be in front of the footer, and I want it to stay above the footer.
Here is the code that I use:
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('.go-top').fadeIn(200);
} else {
$('.go-top').fadeOut(200);
}
});
$('.go-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 300);
})
});
.go-top {
position: fixed;
bottom: 2em;
right: 0.5em;
text-decoration: none;
font-size: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
↑
$(document).ready(function() {
$(window).scroll(function() {
//--------------------------- Lines added ------------------------//
var footertotop = ($('.footer').position().top);
var scrolltop = $(document).scrollTop() + window.innerHeight;
var difference = scrolltop-footertotop;
if (scrolltop > footertotop) {
$('.go-top').css({'bottom' : difference});
}else{
$('.go-top').css({'bottom' : 10});
};
//--------------------------- end ---------------------------------//
if ($(this).scrollTop() > 200) {
$('.go-top').fadeIn(200);
} else {
$('.go-top').fadeOut(200);
}
});
$('.go-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 300);
})
});
.container{height:2000px;position:relative}
.footer{height:200px;width:100%;position:absolute;bottom:0px;background:red}
.go-top {
position: fixed;
bottom: 20px;
display:none; // <---- Dont display on page load
right: 0.5em;
text-decoration: none;
font-size: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
↑
<div class="footer"></div>
</div>
add z-index to the css.
something like:
z-index: 100000
make the number as large as needed for it to be on top.
How can i resize a logo( es width: 100px ) in a header on mouse scrolling?
$('.logo').scroll(function() {
$(this).width(100);
$(this).off(); //removes the handler so that it only resizes once...
})
.header {
background-color: black;
}
.logo {
height:100px;
width: 100%;
background-image: url("http://unika.myarmah.it/skin/frontend/sns_simo/default/images/logo.png");
background-repeat: no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<div class="logo"></div>
</div>
Just use javascript:
Why? - Because its just as short as using jQuery.
Update #1 -
after seeing the comments to the previous answer from the author, I have adjusted my example to include animation and reset when at the top of the page. Again - just use javascript, and for better performance benefits use CSS classes so that all paints are done in one cycle.
Update #1 jsfiddle - https://jsfiddle.net/113dn29z/16/
var logo = document.querySelector('.logo');
var handleResize = function(e) {
if (document.body.scrollTop === 0) {
logo.classList.remove("resize");
} else {
logo.classList.add("resize");
}
};
document.addEventListener('scroll', handleResize);
<div class="header">
<div class="logo">
</div>
</div>
body {
height: 9999px;
overflow: auto;
}
.header {
background-color: black;
}
.logo {
margin-top: 200px;
height:100px;
width: 100%;
background-color: red;
background-repeat: no-repeat;
transition: width 0.2s ease;
}
.logo.resize {
width: 100px;
}
old jsFiddle example - https://jsfiddle.net/113dn29z/10/
var logoHasResized = false;
$(document).on('scroll', function (e) {
if (window.scrollY == 0) {
$('.logo').animate({'width': '100%'}, 250);
logoHasResized = false;
} else if (logoHasResized == false) {
$('.logo').animate({'width': 100}, 250);
logoHasResized = true;
}
});
edit: Since you want it to go back when you scroll to the top of the page, i've added in a check to see if the animation has happened, as you don't want it to fire constantly.