Create some complex sticky elements

I’d like to create this thing. Basically I have a vBulletin forum with a normal navbar as seen everywhere. I also have a sticky navbar where I have the login box, etc. I’d like to sticky the vB navbar below that custom nav - this when you scroll down and the vB navbar became no more visible. Then, when you come back, would be great to see the effect for it to go back to its place automatically. I already seen something like this on some websites, but I don’t know how to do it. I already have jQuery loaded in the page (the page I’m talking about is http://www.klayz.com/community/). How could I do this? Can you please help me?

I could also do this way: when you’re scrolling and you reach element X then the navbar appear there with an animation and stay fixed there, so this way I could create a new HTML code for the new animated nav without touching the existing one. As above I really don’t know how I could do this, so any help would be really appreciated. :smile:

You’ll need some Javascript for that I think, I’m not up to date with CSS just to know if it can be done with CSS only. CSS3 has gone a long way and it may be possible.

Definitively, for your second option you’ll need Javascript. CSS can’t touch the DOM.

1 Like

Hi Norman, since you’re using jQuery anyway:

CSS:

.sticky {
    display: none;
    position: fixed;
}

jQuery:

var $element = $('.elementX'),
    $sticky = $('.sticky');

$(window).scroll(function() {

    if ($(window).scrollTop() > $element.offset().top) {
        $sticky.fadeIn();
    } else {
        $sticky.fadeOut();
    }
});

fiddle

2 Likes

With CSS only I found this: http://www.webdesignerdepot.com/2014/05/how-to-create-an-animated-sticky-header-with-css3-and-jquery/

Thank you so much, m3g4p0p. But this seems to doesn’t work in Firefox and in Safari for some reason. Works in Chrome.

Huh? Works fine in ff for me.

Sez jQuery in the very title! :slight_smile: But this is the way to go AFAIC. Use the jQuery scroll Event and check $(window).scrollTop() against $('yourElement').offset().top, and then do something like adding a class or animate something.

1 Like

Check it now: http://www.klayz.com/community/index.php?styleid=27
using the previous CSS/jQuery solution. It works but I can’t control exactly where it will be placed, so if you rezize the window…
I also thought that maybe I can substitute the part of the existing sticky element (grey bar) where now you see “Klayz Community (link) » La community ufficiale del network di Klayz.com” and when you scroll down that navbar appear there making taht text disappear. What do you think?

Nope, it doesn’t work for me. I did a video: https://vid.me/pzxk

The sticky fades in when you scroll below that .p2 element, so it only takes effect with a sufficiently small viewport. :wink:

You could dynamically adjust the position by setting it to the height of that main nav bar, so that it will always be exactly beneath it. Something like:

$('.sticky').css({
    top: $('.navbar').height(),
    left: 0
});

Ohhhhh, ok, now it works! Stupid me! LOL :smile:

Ok, as said I’m not familiar with jQuery or JS. I tried but I can’t make it to work. This is what I have now:

<script> $(window).scroll(function() { if ($(this).scrollTop() > 240){ $('section').addClass("sticky"); } else{ $('section').removeClass("sticky"); } }); $('.sticky').offset({ top: $('#klayz_community_headbar').height(), left: 0 }); </script>

The CSS:

`<style>
    section {
        // set animation
        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease;
    }
    
    section.sticky {
        margin-top: 7px; 
        position: fixed;
        width: 70%;
        top: 8%; 
        right: 30%;
        margin-right: 3px;
        z-index: 101; 
    }

`

What about this? I think this would be the best solution. You don’t see no more the nav? No problem, one appear where there is “Klayz Community (link) » La community ufficiale del network di Klayz.com”.

I think the problem here is that you try to adjust the sticky’s position before it actually exists: before scrolling 240px there is no element having the sticky class, so nothing happens. The solution would be to put the positioning block inside that $(this).scrollTop() > 240 condition.

BTW I’ve edited my previous post since I think .css() is more appropriate here, sorry about that! :expressionless:

Do you mean something like:

$(this).scrollTop($('.sticky').css({
top: $('.navbar').height(),
left: 0
});) > 240

?

Hm no, I was unclear, more like:

$(window).scroll(function() {
    if ($(this).scrollTop() > 240) {
        $('section')
            .addClass("sticky")
            .css({
                top: $('#klayz_community_headbar').height(),
                left: 0
            });
    } else {
        $('section').removeClass("sticky");
    }
});

(I’ve also chained the jQuery commands here, but this is not necessary.)

Ok, I’m using your code, but now the nav goes completely away…

Seems to “hide” behind the grey bar. You have to add its height to the sticky’s top, too.

I did, I also tried to add eg. top: 90%; but it is still no visible.

Ok, it was a issue with z-index too low. :smile:

1 Like

Ok, now I have it working correctly: http://www.klayz.com/community/index.php?styleid=27. Thank you so much!
Next problem: I’d like to add background url() to the stickyed element and change the links colour (just and only when it is sticked). If do it now it changes styles also on its normal position. It is a table. How could I do this?

PS: Anyway, after some brainstorming I think that this would be the best option in any case (but I still don’t know how to do it - I tried with .html() but I can’t just change it to a single string… I’ll need to output there the enire nav HTML code, and with .html it seems to be not possible):

I also thought that maybe I can substitute the part of the existing
sticky element (grey bar) where now you see “Klayz Community (link) » La
community ufficiale del network di Klayz.com” and when you scroll down
that navbar appear there making taht text disappear.

Add those additional styles to the sticky class where you have position: fixed etc.

Why .html()? Do you want to replace the content? If I got you right, I’d just make the nav bar sticky and hide the grey bar with .hide()