nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Child Item

Javascript not working with wordpress.

off.the.walls

Tried this using jquery to no avail thought i'd try pure javascript.

window.onscroll = function() {
var el = document.getElementsByTagName('fixed');
var className = 'fade';
for (var i=0; i<el.length; i++) {
if (el.classList) {
if (window.scrollY > 200)
el.classList.add(className);
else
el.classList.remove(className);
} else {
// IE Fix
if (window.scrollY > 200)
el.className += className;
else
el.className = str.replace(new RegExp("\\b"+className+"\\b","gi"),"");
}
}
}

Have all the css, html, php tags all rendering out fine its just this one fade thats getting me!

Find more posts tagged with

Quick Links

Comments

Fenster

Where is the script located within the top-to-bottom of the generated HTML page? How is it being input? What errors, if any, did debugger tools turn up?

off.the.walls

Fenster wrote: »

Where is the script located within the top-to-bottom of the generated HTML page? How is it being input? What errors, if any, did debugger tools turn up?

After messing about got this working with jQuery

jQuery(window).scroll(function() {
if( jQuery(window).scrollTop() > 850 ) {
jQuery("#fixed").addClass("fade");
} else {
jQuery("#fixed").removeClass("fade");
}
});

redman85

off.the.walls wrote: »

After messing about got this working with jQuery

jQuery(window).scroll(function() {
if( jQuery(window).scrollTop() > 850 ) {
jQuery("#fixed").addClass("fade");
} else {
jQuery("#fixed").removeClass("fade");
}
});

you can use $ instead of jQuery, $ is a reference to the jQuery object.

also check out this blog for a better way (performance wise) to do this http://ejohn.org/blog/learning-from-twitter/

Fenster

You can also use straight CSS for certain fade effects these days:

.fade,
.fade:hover {
    transition: background-color .3s ease-in-out;
    -moz-transition: background-color .3s ease-in-out;
    -webkit-transition: background-color .3s ease-in-out; 
    -o-transition: background-color .3s ease-in-out; 
}

.fade {
    background: #000;
}

.fade:hover {
    background: #fff;
}