Menu icon Foundation
Switch logo to text on Sticky Nav scroll

Hi

I want to switch a logo to text as soon as the user scrolls down the page. The height of the top bar shrinks, so I need to know how to trigger the switch as soon as a user starts scrolling down the page.

Text to show after scrolling and logo before scrolling

Is there some Javascript to do this? Is there a way of saying if the user is not scrolling add a class to the text to hide it and if scrolling add a class to the logo to hide it? Maybe something like...

$(document).on("scroll",function(){
if($(document).scrollTop()>1){
$("logo").addClass("hide");
} else {
$("text-logo").addClass("hide");
}
});

I have attached IDs to each of them...

<div class="top-bar-left">
	<ul class="menu">
		<li id="text-logo"><a href="index.php" tabindex="2" title="Your website home page" class="home">Link Text Goes Here</a></li>
		<li id="logo"><a class="nmarg" href="index.php" tabindex="2" title="Your website home page" class="home"><img src="../img/logo.png" alt="Logo description"></a></li>
	</ul>
</div>

Cheers
G

Sticky Navigationstickytopbarlogo switch

Hi

I want to switch a logo to text as soon as the user scrolls down the page. The height of the top bar shrinks, so I need to know how to trigger the switch as soon as a user starts scrolling down the page.

Text to show after scrolling and logo before scrolling

Is there some Javascript to do this? Is there a way of saying if the user is not scrolling add a class to the text to hide it and if scrolling add a class to the logo to hide it? Maybe something like...

$(document).on("scroll",function(){
if($(document).scrollTop()>1){
$("logo").addClass("hide");
} else {
$("text-logo").addClass("hide");
}
});

I have attached IDs to each of them...

<div class="top-bar-left">
	<ul class="menu">
		<li id="text-logo"><a href="index.php" tabindex="2" title="Your website home page" class="home">Link Text Goes Here</a></li>
		<li id="logo"><a class="nmarg" href="index.php" tabindex="2" title="Your website home page" class="home"><img src="../img/logo.png" alt="Logo description"></a></li>
	</ul>
</div>

Cheers
G

Jarryd Fillmore about 3 years ago

Would love to see this answer too!

I'm digging into jQuery as well so i'll follow this thread :)

Glynn Williams about 3 years ago

I worked it out!

Firstly I added class="hide" to the text-logo li...

 <div class="top-bar-left">
	<ul class="menu">
		<li id="text-logo" class="hide"><a href="'.BASE_DIR.'" tabindex="2" title="Congregation of Yahweh home page" class="home">The Congregation of Yahweh</a></li>
		<li id="logo"><a class="nmarg" href="'.BASE_DIR.'" tabindex="2" title="Congregation of Yahweh home page" class="home"><img class="nmarg" src="'.BASE_DIR.'img/coy-white-logo.png" alt="Congregation of Yahweh white logo"></a></li>
	</ul>
</div>

...then I amended the Javascript to this...

<script>
<!-- load Foundation sticky script -->
$('.top-bar').on('sticky.zf.stuckto:top', function(){
	$(this).addClass('shrink');
	$('#logo').addClass("hide");
	$('#text-logo').removeClass("hide");
}).on('sticky.zf.unstuckfrom:top', function(){
	$(this).removeClass('shrink');
	$('#logo').removeClass("hide");
	$('#text-logo').addClass("hide");
})
</script>

...works great. Hope this might prove helpful to others looking to do this.

Cheers
G

Glynn Williams about 3 years ago

 PS This is built using this building block

http://zurb.com/building-blocks/shrinking-sticky-navigation-menu-f6

G

Glynn Williams about 3 years ago

If you want to have the logo fade in and out, I started by adding an ID tag to the logo image...

<img id="YOURID" src="../images/your-image.png" alt="Image alt text">

...then on document ready (if you want it to fade in when the page first loads)...

$(document).ready(function() {$('#YOURID').hide();$('#YOURID').fadeIn(1500);});

...and then to fade the logo in and out when the user scrolls...

<script>
<!-- load Foundation sticky script -->
$('.top-bar').on('sticky.zf.stuckto:top', function(){
	$(this).addClass('shrink');
	$('#logo').addClass("hide");
	$('#text-logo').removeClass("hide");}
).on('sticky.zf.unstuckfrom:top', function(){
	$(this).removeClass('shrink');
	$('#logo').removeClass("hide");
	$('#YOURID').hide();
	$('#YOURID').fadeIn(1500);
	$('#text-logo').addClass("hide");}
)
</script>

By hiding the image with Javascript means it will show by default if the user has JS turned off. You can play with the fade in time to meet your requirements.

Hope this is useful too.

G