Agency Pro – Site Header transparency linked to scroll

[JeffCl]

Hey,

I am using Agency Pro, and I have made my header transparent using rgba colours in the css:

.site-header {
    background-color: rgba(51, 51, 51, 0.3);
}

Which is great...

However I want the transparency to stop once the user has scrolled up and onto the home middle widget.

Sort of like the opposite to how the home top widget text fades away.

As the page scrolls up and the home top widget text fades and the home middle widget comes into view, I'd like the site header to become a solid color fixed top nav bar.

I hope someone can help.

Thanks

Jeff

http://ezuconsulting.com

[Nettbrygga]

Hello,

This should work.

Add this to home.js:

$( document ).on('scroll', function(){

if ( $( document ).scrollTop() > 650 ){
$( '.site-header' ).addClass( 'dark' );
}
else {
$( '.site-header' ).removeClass( 'dark' );
}
});

CSS:
.dark {
background-color: #000 !important;
}

---

Contact me for Genesis and WordPress related issues – inge [@] nettbrygga.no

[JeffCl]

Dear Penguinsuit

You sir, are a gent. That is very very much appreciated.

Jeff

[Nettbrygga]

No problem 🙂

---

Contact me for Genesis and WordPress related issues – inge [@] nettbrygga.no

[vagalab]

Hi,
I would like to ask where exactly to put code in home.js:

jQuery(function( $ ){

    $.localScroll({
    	duration: 900
    });
    
	function fade_home_top() {
		if ( $(window).width() > 800 ) {
			window_scroll = $(this).scrollTop();
	   		$( ".home-top" ).css({
				  'opacity' : 1-(window_scroll/300)
	    	});
		} else {
			$( ".home-top" ).css({
				'opacity' : 1
			});
		}
	}
	$(window).scroll(function() { fade_home_top(); });

	//Allow images to work on all mobile devices
	if ( $(window).width() >= 480 ) {
		$( ".home-middle .featuredpost a.aligncenter,.home-middle .featuredpost a.alignleft, .home-middle .featuredpost a.alignright, .home-middle .featuredpost a.alignnone").on( "touchend orientationchange", function (e) {
			"use strict";
			var link = $(this);
			if ( link.hasClass( "hover" ) ) {
				return true;
			} else {
				link.addClass( "hover" );
				$( ".home-middle .featuredpost a.aligncenter,.home-middle .featuredpost a.alignleft, .home-middle .featuredpost a.alignright, .home-middle .featuredpost a.alignnone").not(this).removeClass( "hover" );
				e.preventDefault();
				return false; //extra, and to make sure the function has consistent return points
			}
		});
	}
	
	//Add Keyboard Accessibility
	$( ".home-middle .featuredpost .entry *" )
	.focus( function() {
		$(this).closest( ".entry" ).addClass( "focused" );
	})
	.blur( function() {
		$(this).closest( ".entry" ).removeClass( "focused" );
	});
	
});

[Author]

Posts