â–¼
Streaming live at 10am (PST)

Need help getting link block to stay at bottom of section

Design help General
#1

I added some code to get the sections on a single page site to adjust to the window height, and it works fine. I am trying to make previous / next buttons to stay at the bottom of these individual sections given that the height is now variable. Any ideas are much appreciated, thanks.

#2

Have you tried absolute positioning? You have to set your section or the container (whatever you want it to be relative to) to be Position: Relative. Then set your object you want to be at the bottom to be Position Absolute. There are some presets there to help you.

Webflow_-_helix01.png239×544 40.5 KB

Let me know if this helps!

#3

That worked great, thanks! Now I just need to figure out how to use jquery to highlight the navigation links when the section is scrolled over. Any ideas?

#4

@theredonem got it figured out here:

I asked him to give us a quick tutorial on how to do this. @theredonem can you post it in the Tricks and Tips category? People will looooove you! :wink:

#5

Hi, what code did you use for this? Would love to add this feature to my site.

Thanks,
Jonathan

#9 
<style type="text/css">
div.full-page {
    width:100%;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script>
$(document).ready(function(){
    vpw = $(window).width();
    vph = $(window).height();

    $('.full-page').height(vph);
});
</script>
#10

Sorry, little bit of newbie over here. Can you guide me as to what I need to change in the code and any other modifications I may need to make?

#11

You should look at Tips & Tricks stuff more often :wink:

I just came up with another idea which I will post on the thread above too. We can not only set the height on document loading, but also on window resize. Just like this:

$(function(){
    $(document).ready(function() {
        vph = $(window).height();
        $('.full-page').css('height',vph);
    });
    
    $(window).resize(function(){
        vpw = $(window).width();
        vph = $(window).height();
        
        $('.full-page').css('height',vph);
    });
});
#12