Changing color of hamburger menu on scroll - javascript

I have built a site on selfhosted WordPress (with Divi). The site uses two menu logos, one for primary menu bar and the second one for the fixed header. The logo changes on scroll with this code:
<script>
jQuery(window).scroll(function () {
if (jQuery(window).scrollTop() > 50) {
jQuery('#logo').attr('src','link_to_fixed_header_logo')
} else {
jQuery('#logo').attr('src','link_to_primary_top_menu_logo')
}
});
</script>
I would like the site to change color of the hamgurger button on scroll in the mobile version. The inspect tool shows that the color is defined by these lines:
body.et_divi_100_custom_hamburger_menu .et_divi_100_custom_hamburger_menu__icon div {
background: #000!important;
I use this CSS to make the hamburger button black. Is it possible to change the CSS through the JQuery code, so that the button is white on top, and turns black on scroll?

Sure, you can modify your Javascript to also set the color of the hamburger menu using your existing scroll handler. You might be able to make the selector at the top there a bit nicer, but I don't know the structure of your page.
jQuery(window).scroll(function () {
var hamburgerImage = jQuery('body.et_divi_100_custom_hamburger_menu .et_divi_100_custom_hamburger_menu__icon div');
if (jQuery(window).scrollTop() > 50) {
jQuery('#logo').attr('src','link_to_fixed_header_logo');
hamburgerImage.css('background-color', '#FFF');
} else {
jQuery('#logo').attr('src','link_to_primary_top_menu_logo');
hamburgerImage.css('background-color', '#000');
}
});

This can be accomplished just with CSS, no need for JS.
DIVI, on scrolling, adds automatically a class to the header element, the class is .et-fixed-header.
However, to enable this you should enable the option "Fixed Navigation Bar" from Backend->DIVI->Theme Options
Use this to change the color:
body.et_divi_100_custom_hamburger_menu header.et-fixed-header .et_divi_100_custom_hamburger_menu__icon div{}

Related

Fading text+icon when scrolling down. Appears while again on top

I'm trying to create some sort of info "Scroll Down" button (not clickable) which has to be visible while scroll bar is up on top, fade out when scroll down a few pixels and fade back in when up again.
So far I was able to create the arrow and the message so far as well as the fading part.
Here is a fiddle: https://jsfiddle.net/8b3jL7r0/1/
var btn = $("#button");
$(window).scroll(function() {
if ($(window).scrollTop() < 100) {
btn.addClass("show");
} else {
btn.removeClass("show");
}
});
var btn2 = $("#scrolltxt");
$(window).scroll(function() {
if ($(window).scrollTop() < 100) {
btn2.addClass("showx");
} else {
btn2.removeClass("showx");
}
});
The problem with is that the arrow and the info text 'Scroll Down' does not appear right from the beginning, you have to scroll down a bit so they appear on top and then everything works smooth. Any clue how to make them visible right from the first load of the code?
Any idea how could I transfer all this code into one single code module in WordPress and have it work exactly like in the fiddle ? Because I've tried to insert it but it seems to not work at all, nothing appears on the page, not the arrow nor the info text.
I just added the inital classes to both elements:
https://jsfiddle.net/4e2cafju/
<div id="button" class="show"></div>
<div id="scrolltxt" class="showx">scroll down</div>
for 2:
You should be able to put these elements directly into a template. You should be able to add the css to the style sheet. And you could lnk to an external JS file. That would probably be best practice. You could also put all the code into a single page. I'm not sure how your wordpress install / theme is set up.

CSS & JS div slider - repeated click

I have a simple CSS created design. Upon click of an arrow-looking CSS div I have another design slide into the frame from left: -9999px.
I can't seem to figure out how to make that div susceptible to more than one click.
this is what i mean:
Imagine the design looks like an X. Upon the click of a div a Y slides in from the right. XY. When the user clicks the button again I want the Y to slide out, and continue the same path to the left. I have the following JS:
topleft.addEventListener('click', function(){
addLeft.classList.replace('out', 'slideLeft')
addRight.classList.replace('out', 'slideLeft')
})
Since i am learning JS I'm looking for a vanilla JS solution, without any frameworks/libraries.
Thanks all
topleft.addEventListener('click', function(){
if (addLeft.classList[1] == 'out'){
addLeft.classList.replace('out', 'slideLeft')
addRight.classList.replace('out', 'slideLeft')
} else if (addLeft.classList[1] == 'slideLeft') {
addLeft.classList.replace('slideLeft', 'slideOut')
addRight.classList.replace('slideLeft', 'slideOut')
setTimeout(function(){
addLeft.classList.replace('slideOut', 'out'),
addRight.classList.replace('slideOut', 'out')
}, 300)
}
})

Change navigation text color on scroll over sections with data-attribute

I have a site with fullscreen image header sections (header data-attribute="image") and sections with a white background (no data-attribute). The default color of my nav (that has no background-color) is white. This is fine for when I scroll over images. But I would like to change the text-color (give a class ".black-text") of my navigation when I scroll over a header section with (data-attribute="image") and vice versa. The sections do not have fixed heights as the content of the sections can change.
This is my jQuery so far. Can this be done only with jQuery or do I need another JS plugin?
jQuery(window).on('scroll', function() {
jQuery('header').each(function() {
if(jQuery(window).scrollTop() >= jQuery(this).offset().top) {
var image = jQuery(this).attr('*[data-type="image"]');
jQuery('.site-header .navigation a').addClass('black-text');
} else {
jQuery('.site-header .navigation a').removeClass('black-text');
}
});
});

jQuery .hide() -- sliding elements left

I'm fixing my nav to the top of the page. I'm using Bootstrap (CSS only). I'm using jQuery to hide one logo (img class .logo) and show another (img class .logo-sm), on scroll.
Everything basically works, except for one thing. The hiding function slides the main logo to the left as it fades out, but I'd like it to slide up. I'm pretty sure this is not .hide() function's default behavior, but I don't know jQuery very well so I'm not sure how to change it.
I built a JSFiddle to demonstrate the behavior. It doesn't work consistently for some reason (it does locally), but you can see the logo sliding left the first time you scroll down.
JSFiddle
The script:
$(document).ready(function() {
// nav fixing
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$(".logo").hide(100);
$(".logo-sm").show(200);
} else {
$(".logo").show(100);
$(".logo-sm").hide(200);
}
});
});
This is happening because .show() is applying display: inline-block when what you need is display: block.
To fix this, you need to find what's setting the header .logo css display value to be inline and change it to block. From the jquery api, show will set the display property to whatever it was set to initially. In this case, it's inline-block which is why your logo is moving to the left.
$.hide() only sets the display of the element to none. It doesn't animate. That behavior is probably caused by having transitions in your CSS.
If you want to animate the element with jQuery, you can use .slideUp() and .slideDown().
$(document).ready(function() {
// nav fixing
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$(".logo").slideUp(100);
$(".logo-sm").slideDown(200);
} else {
$(".logo").slideUp(100);
$(".logo-sm").slideDown(200);
}
});
});
But you've got some other stuff going on in your fiddle that is causing some weirdness so this won't work much better. I would suggest not animating with jQuery, but use it to change classes on the elements and handle the animation with CSS transitions. Something like this:
$(document).ready(function() {
// nav fixing
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$(".logo").removeClass("showing");
$(".logo-sm").addClass("showing");
} else {
$(".logo-sm").removeClass("showing");
$(".logo").addClass("showing");
}
});
});
And then style the .showing class with transitions.

Twitter Bootstrap and Snap.js

I'm trying to integrate jakiestfu's Snap.js with Twitter Bootstrap.
I've got something that functions (I can get the content to slide, or open a drawer via a click event). However, I'm at the limit of my CSS skills for the final problem: The drawer content is always visible regardless of the state of the drawer.
JSFiddle example
While I could hard-code the visibility of the drawer element on document load and do something on the open/close click event, that doesn't do anything for the drag capability that Snap.js has.
addEvent(document.getElementById('open-left'), 'click', function () {
// Muck with visibility in here
// Added code sample because StackOverflow wants it with a fiddle...
if (snapper.state().state == "left") {
snapper.close();
} else {
snapper.open('left');
}});
You need to setup a background color for your content:
#content{
background: white;
}
Working fiddle: http://jsfiddle.net/basarat/ygm3L/

Categories