Change Sticky Navbar Design When Sticky

Hi,

I’m currently trying to recreate a Wordpress website in Webflow.
But I have troubles recreating the navbar in Webflow.
My navbar is placed below my hero banner. When the navbar reaches the top of the screen, when scrolling, and it becomes sticky, I would like to change the top border radius and the background color of the navbar.
Does anyone know how I do this?
On my current site, I use javascript to add the class .sticky. And in that why I can change the design.


Here is my public share link: LINK
(how to access public share link)

Hi @LeGraa, if you are able to add the class, any reason why you dont style the class?

.sticky {
Border-radius: 0px;
Background-color: red;
}

I don´t know how to add the class when it becomes sticky in Webflow?

Sorry I thought ‘current’ meant your webflow site.

Anyway, can you share your read-only link & published link for me to have a look at?

Also, can you share the current javascript you are using to add the class? You should be able to reuse it in webflow.

I just checked my site and could see that I was just using a Wordpress plugin to add the class.

But normally I would write this:

function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add(“sticky”)
} else {
navbar.classList.remove(“sticky”);
}
}

https://preview.webflow.com/preview/livsforvandling?utm_medium=preview_link&utm_source=designer&utm_content=livsforvandling&preview=2dacf491f184f8a769f57ee87b408537&mode=preview

I’m not very well versed in vanilla JS, but your code looks like something I would do in Jquery:

<script>
const navtop = $('.container-2').offset().top
$(window).on('scroll', function(){
console.log(navtop, $(window).scrollTop())//you can delete this line
        if($(window).scrollTop() > navtop){
               $('.container-2').addClass('stuck')
        }  else {
               $('.container-2').removeClass('stuck')
        }  
})
</script>

And then you can style the class in Webflow like so. Just delete the class before publishing.

You can add the code here. Click the settings, scroll to the most bottom and you’ll see before </body>
Screen Shot 2020-05-15 at 03.26.45

1 Like

Thanks, but I need to paid to add custom script :frowning:
So I can´t test it right now. But I will keep it in mind, when I know if i’m going to shift to Webflow.

I appreciate your help :smiley:

1 Like

No worries! Just reach out here if you need help.