I know this is basic for most of you but im not that experienced on this language. So when i add both of the codes to functions.php they dont work. But it only works when i use only one of them. So im thinking maybe it would work if they both were in the same code lines. I tried to do that but couldnt make it work.
This is the first function:
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 90 ||
document.documentElement.scrollTop > 90)
{
document.getElementById("quadmenu_0")
.style.padding = "20px 0px";
}
else {
document.getElementById("quadmenu_0")
.style.padding = "180px 0px 40px";
}
}
And this is the second function:
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 150 ||
document.documentElement.scrollTop > 150)
{
document.getElementById("ast-mobile-header")
.style.backgroundColor = "red";
}
else {
document.getElementById("ast-mobile-header")
.style.backgroundColor = "white";
}
}
You can call both functions within the onScroll listener. They will need to of course have different names (and best to choose something more logical than the below example)
window.onscroll = function() {
scrollFunction1()
scrollFunction2()
};
function scrollFunction1() {
if (document.body.scrollTop > 90 ||
document.documentElement.scrollTop > 90) {
document.getElementById("quadmenu_0")
.style.padding = "20px 0px";
} else {
document.getElementById("quadmenu_0")
.style.padding = "180px 0px 40px";
}
}
function scrollFunction2() {
if (document.body.scrollTop > 150 ||
document.documentElement.scrollTop > 150) {
document.getElementById("ast-mobile-header")
.style.backgroundColor = "red";
} else {
document.getElementById("ast-mobile-header")
.style.backgroundColor = "white";
}
}
Related
Both scripts work separately but I'm trying to merge them into one. All my efforts didn't work.
It's a simple script to hide the navbar on scroll-down, and show it up on scroll-up with a white background. But when the page is scrolled all the way up, I need the navbar background to become transparent.
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-85px";
}
prevScrollpos = currentScrollPos;
}
</script>
<script>
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 85 || document.documentElement.scrollTop > 85) {
document.getElementById("navbar").style.background = "#fff";
} else {
document.getElementById("navbar").style.background = "none";
}
}
</script>
There are two ways to solve your problem:
Solution 1: Use window.addEventListener to avoid overriding window.onscroll property
This solution requires the least amount of effort, as it is simply switching out the method of listening to the scroll event. It is also helpful if both logic reside in separate files and you don't want to combine them.
<script>
let prevScrollpos = window.pageYOffset;
window.addEventListener('scroll', () => {
const currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-85px";
}
prevScrollpos = currentScrollPos;
});
</script>
<script>
window.addEventListener('scroll', scrollFunction);
function scrollFunction() {
if (document.body.scrollTop > 85 || document.documentElement.scrollTop > 85) {
document.getElementById("navbar").style.background = "#fff";
} else {
document.getElementById("navbar").style.background = "none";
}
}
</script>
Solution 2: Combine logic from both functions into one
This method moves all your scroll-related logic into a single event listener for the ease of maintenance. In this case, you can still use window.onscroll to assign the function, even though I would strongly encourage not to do so:
<script>
window.addEventListener('scroll', () => {
navBarScrollFunction();
scrollFunction();
});
let prevScrollpos = window.pageYOffset;
function navBarScrollFunction() {
const currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-85px";
}
prevScrollpos = currentScrollPos;
}
function scrollFunction() {
if (document.body.scrollTop > 85 || document.documentElement.scrollTop > 85) {
document.getElementById("navbar").style.background = "#fff";
} else {
document.getElementById("navbar").style.background = "none";
}
}
</script>
I need to set three different background on a navbar:
1. No background if the page is less than 400 px of scrolling
2. Two different colors if the scroll of the page is more than 400 px:
a) blue when I scroll down
b) green when I scroll up.
I've tried to use the following code, but it seems like after I enter in the first IF, the function continue to work even if the page is less than 400px.
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("nav1").style.background = "rgba(0, 41, 51,1)";
} else {
lastScroll = currentScroll;
document.getElementById("nav1").style.background = "rgba(68,78,36,1)";
}
prevScrollpos = currentScrollPos;
} else {
document.getElementById("nav1").style.background = "rgba(0,0,0,0)";
}
}
Thanks!
Do not attempt to assign two functions to window.onscroll, which is a property and can hold only one function.
Here is what is going on with your current code:
An annonymous function is declared (it calls scrollFunction) and assigned to window.onscroll
At the very first scroll, scrollFunction is called. If the page has not scrolled yet beyond 400px, the if block is not executed.
As soon as the page goes beyond 400px, prevScrollpos is declared... Then the function previously assigned to window.onscroll is overwriten with a new one.
That is why the comparison for 400px isn't done after that. It is out of that second function. The first one got lost in the nothingness.
Here is what you want to achieve:
// This variable needs to be global
let prevScrollpos = 0;
// This getElement can also be global
let nav1 = document.getElementById("nav1")
function scrollFunction() {
// This varable needs to be local
let currentScrollPos = window.pageYOffset;
if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
// Determine scroll direction
if (prevScrollpos > currentScrollPos) {
nav1.style.background = "rgba(0, 41, 51,1)";
} else {
nav1.style.background = "rgba(68,78,36,1)";
}
}
// If below 400px
else {
nav1.style.background = "rgba(0,0,0,0)";
}
// Update this variable for the next iteration
prevScrollpos = currentScrollPos;
// For this demo only
console.clear()
console.log(currentScrollPos)
}
// Assign the scrollFunction reference to the window property
window.onscroll = scrollFunction;
body {
height: 1000px;
}
#nav1{
position: sticky;
top: 4px;
height: 100px;
border: 1px solid black;
}
<div id="nav1"></div>
You can use this script:
<script>
window.onscroll = function () { myFunction() };
function myFunction() {
if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
var lastScrollTop = 0;
window.addEventListener("scroll", function () {
var st = window.pageYOffset || document.documentElement.scrollTop;
if (st > lastScrollTop) {
document.getElementById("nav").style.background = "rgba(0, 41, 51,1)";
} else {
document.getElementById("nav").style.background = "rgba(68,78,36,1)";
}
lastScrollTop = st <= 0 ? 0 : st;
}, false);
} else {
document.getElementById("nav").style.background = "rgba(0,0,0,0)";
}
}
</script>
Let me start of by saying I am not much a coder and pretty much fumble my way through using javascript libraries and jquery etc. I discovered and have been using classie.js to add classes to divs and elements on in my html when they are appear at a certain scroll distance on the page. so in my header i have a LOT of scripts to add and remove classes... for example:
<script>
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 100,
feature = document.querySelector("#welcomediv");
if (distanceY > shrinkOn) {
classie.remove(feature,"welcomewish");
} else {
classie.add(feature,"welcomewish");
}
});
}
window.onload = init();
</script>
<script>
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
feature = document.querySelector("#slidetext");
if (distanceY > shrinkOn) {
classie.remove(feature,"welcomewish");
} else {
classie.add(feature,"welcomewish");
}
});
}
window.onload = init();
</script>
<script>
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 50, <?php /*?>130<?php */?>
feature = document.querySelector("#roundfeatures-panel");
if (distanceY > shrinkOn) {
classie.add(feature,"appearnow");
} else {
if (classie.has(feature,"appearnow")) {
classie.remove(feature,"appearnow");
}
}
});
}
window.onload = init();
</script>
<script>
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 140,
feature = document.querySelector("#roundfeatures-panel");
if (distanceY > shrinkOn) {
classie.add(feature,"expandnow");
} else {
if (classie.has(feature,"expandnow")) {
classie.remove(feature,"expandnow");
}
}
});
}
window.onload = init();
</script>
<script>
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 1000,
feature = document.querySelector("#futureevents-panel");
if (distanceY > shrinkOn) {
classie.add(feature,"appearnow");
} else {
if (classie.has(feature,"appearnow")) {
classie.remove(feature,"appearnow");
}
}
});
}
window.onload = init();
</script>
<script>
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 1400,
feature = document.querySelector("#viewallworkshops");
if (distanceY > shrinkOn) {
classie.add(feature,"slideinnow");
} else {
if (classie.has(feature,"slideinnow")) {
classie.remove(feature,"slideinnow");
}
}
});
}
window.onload = init();
</script>
<script>
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 2250,
feature = document.querySelector("#subscribe-panel");
if (distanceY > shrinkOn) {
classie.add(feature,"appearnow");
} else {
if (classie.has(feature,"appearnow")) {
classie.remove(feature,"appearnow");
}
}
});
}
window.onload = init();
</script>
(...and there are even more! and if i had my way, i'd probably add more still, because i like what i can do with the elements by adding and removing classes in this way. but if feels clunky and messy and is very hard to maintain.)
and then obviously my html elements on the page.
The problems with this are:
1) ugly scripts in my header.. is there a way i can condense the scripts in some way and retain their purpose?
2) Whenever i add new elements or take them out of the page, i have to manually change the number (shrinkOn) associated with each instance. This becomes a nightmare to be honest. It would be better if i could in some way say "when this element appears on the page" or "100px after this element appears on the page" rather than stating a strict number of pixels the page has scrolled. IS this possible with classie, or do i need to look at another option?
thanks in advance and i hope this question is appropriate.
Yes, that code can readily be parameterized, as all the blocks are doing the same thing.
Have an array of updates to do:
var scrollUpdates = [];
A function to add each update (this is purely for convenience, you could directly add them above):
addScrollUpdate(featureSelector, shrinkOn, className) {
scrollUpdates.push({
featureSelector: featureSelector,
shrinkOn: shrinkOn,
className: className
});
}
One handler handles them:
window.addEventListener('scroll', function(e){
scrollUpdates.forEach(function(update) {
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
feature = document.querySelector(update.featureSelector);
if (distanceY > update.shrinkOn) {
classie.add(feature, update.className);
} else {
if (classie.has(feature, update.className)) {
classie.remove(feature, update.className);
}
}
});
});
And you add each one like this:
addScrollUpdate("#welcomediv", 100, "welcomewish");
Putting it all together in one window load handler:
window.onload = function() {
var scrollUpdates = [];
addScrollUpdate(featureSelector, shrinkOn, className) {
scrollUpdates.push({
featureSelector: featureSelector,
shrinkOn: shrinkOn,
className: className
});
}
window.addEventListener('scroll', function(e){
scrollUpdates.forEach(function(update) {
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
feature = document.querySelector(update.featureSelector);
if (distanceY > update.shrinkOn) {
classie.add(feature, update.className);
} else {
if (classie.has(feature, update.className)) {
classie.remove(feature, update.className);
}
}
});
});
addScrollUpdate("#welcomediv", 100, "welcomewish");
addScrollUpdate("#slidetext", 300, "welcomewish");
// ...and so on...
};
However, I wouldn't use the window load event for this, that happens very late in the page load process. Instead, I'd put the script tag at the end of the HTML, just before the closing </body> tag, and run it immediately in an inline-invoked function expression:
(function() {
// the code here
})();
Side note: I don't know Classie, but you probably don't need the has test before calling remove.
I'm trying to disable this script to run at a certain screen size.
<script>
function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 250,
header = document.querySelector("header");
if (distanceY > shrinkOn) {
classie.add(header,"smaller");
} else {
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();
</script>
I've tried wrapping the code with the following
if($(window).width() > 1200) {
// script here
}
And
window.addEventListener('resize', function(){
if(window.innerWidth > 568){
// script here
}
});
But none of them seems to work. Any recommendations?
I am writing this code to change my navigation link colour(white to #03c1cb) based on the url address not but it doesn't run properly please help me. I want to change the color of navigation link at that particular url address
my html code is
<a href="#home" id="start1" class="scroll" style="text-decoration:none;position:absolute;
right:450px;top:37px;font-weight:bold;color:white;font-size:15px;z-index:200;
transition:0.5s" onmouseover="big(this)" onmouseout="small(this)">HOME</a>
function big(x) {
x.style.fontSize = "17px";
x.style.color = "#03c1cb";
}
function small(x) {
var y = location.hash;
if (x.href == y) {
x.style.fontSize = "17px";
x.style.color = "#03c1cb";
} else {
x.style.color = "white";
x.style.fontSize = "15px";
}
}
function isElementInViewport(el) {
//special bonus for those using jQuery
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $j(window).height() */
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $j(window).width() */
);
}
// url change on clicking
$(document).ready(function() {
$(".scroll").click(function(e) {
e.preventDefault();
var section = this.href,
sectionClean = section.substring(section.indexOf("#"));
$("html, body").animate({
scrollTop: $j(sectionClean).offset().top
}, 1000, function() {
window.location.hash = sectionClean;
});
});
});
// listen for the scroll event
$(document).on("scroll", function() {
console.log("onscroll event fired...");
// check if the anchor elements are visible
$(".anchor").each(function(idx, el) {
if (isElementInViewport(el)) {
// update the URL hash
if (window.history.pushState) {
var urlHash = "#" + $j(el).attr("id");
window.history.pushState(null, null, urlHash);
}
}
});
});
Please help me