Skip to main content

Hello we would love to show a navigation bar on our landing page but only when people scroll down the page…


So far I tried:


 

$(function(){   

$(window).scroll(function(){   

if($(this).scrollTop() \> 560){   

var boxToAppend = '#lp-pom-box-348';   

var boxParent = $(boxToAppend).parent();   

$(boxToAppend).clone().appendTo(boxParent).css({"position":"fixed", "left":"0", "top":"0", "width":"100%", "z-index":"100"}).children().remove();   

 

$(boxToAppend).css({"position":"fixed", "left":"auto", "top":"0px", "width":"100%", "z-index":"200", "border-style":"none none none none", "border-width":"0px", "background":"none"});   

 

}else if($(this).scrollTop() \<= $('#header').offset().top){   

var boxToAppend = '#lp-pom-box-348';   

var boxParent = $(boxToAppend).parent();   

$(boxToAppend).clone().appendTo(boxParent).css({"display":"none", "position":"fixed", "left":"0", "top":"0", "width":"100%", "z-index":"100"}).children().remove();   

 

$(boxToAppend).css({"display":"none", "position":"fixed", "left":"auto", "top":"-70px", "width":"100%", "z-index":"200", "border-style":"none none none none", "border-width":"0px", "background":"none"});   

 

}   

});   

});

But it did not work…


Many thanks for any input…


Best regards

B

Hi Bjšrn!


I was hoping to get a bit more information about what you’re trying to achieve here. It sounds like you’re integrating an entire navigation bar on your landing page, and trying to hide/display it based on scroll state - is that correct?


Before we dive into this, I’m just curious to hear more about your use case of why you’re trying to achieve this. Generally, a navigation bar isn’t something you’d want to put on a landing page as it can hurt your conversion rate quite substantially. Giving users more opportunities to navigate away from your page is something you should be cautious about, so I’m interested to hear your reasoning for including it.


Help me understand the why so I can help you reach the how.


Cheers,

Hi Justin,


here is the link to the landing page I am working on: http://lp.hfh.de/launch/


And I think you have the right understanding.


We want to hide the navigation bar when someone gets on the page. Once he srcolls down the navigation should appear and be sticky during the srcolling process.


We really appreciate your support!


Best regards

B

Hi Bjšrn,


Thanks for the response! I took a look at your page and I believe I’m starting to understand how you’re looking to use this. Currently, the buttons on the nav bar all lead to the same spot on the page, but I’m assuming that when it’s fully launched each of these links will lead to different areas of the page. Is this correct?


From a design and conversion perspective, you’re mostly looking for the nav bar to appear only if they start scrolling down on the page. If the user doesn’t scroll, they’re left at the top with the form above the fold.


If this is correct so far, then it looks like you have a very neat (and useful) implementation of a header and a very smart use case. Fill me in if this is the case and I’ll see if we can help push this along.


Cheers,

Hey Justin,

do you have any news on this topic?


We want to launch the landing page soon. Do you think you can support us on this?


Best regards

Bjšrn

Hey Bjšrn,

Sorry for the delay here! I wanted to confirm if this was the exact solution you’re looking for before we start digging in. Our java guru Mark is out of the office until next week, but we’ll see what we can do in the meantime to help out.


Hang tight!

Hey Bjšrn


The modifications you made to the fixed header script is in the right direction. But it would be much easier to toggle to appearance of the header using jQuerys .hide() and .show() methods.


Here’s a updated script that hides the menu within the first 50px of the page scroll offset.


https://gist.github.com/johnnyopao/44…


You can modify at what point in your scrolling offset to show the header by setting a different value to ‘scrollPositionToShowHeader’.


Here’s a test page with the script above working:


http://unbouncepages.com/hiddenfixedh…

This is awesome, Johnny! Thanks for digging in to this one, super cool. 

Thanks a lot… works perfect!

Is there a way i could apply this to my code?

I am doing my best to implement this… but lack some skills… :



  • how can I have a 100% transparent sticky header, with negative logo colour and tab-names in one colour, and

  • have the banner appear (eg in white) after 1 pixel scroll, where the logo is replaced by a positive one, and the colour of the tab-names changed.


The sticky header works, the scroll and activate the banner after 1px scroll works too. But I can’t do the above 2 features. I am sure it’s possible… 


Can someone help me where to add colour codes etc.


Thanks,

Thomas

Reply


Terms & ConditionsCookie settings