2 replies [Last post]
suavedesign
suavedesign's picture
Offline
Enthusiast
Last seen: 5 years 42 weeks ago
Timezone: GMT-5
Joined: 2010-12-01
Posts: 128
Points: 191

I have an element (a nav bar) on my website that has fixed positioning. How can I make it be fixed only up to a certain point?
The url: http://www.peresidences.com/index.php
I want the nav bar to be fixed positioning only until it reaches under the picture, and then it should stay where it is, and not come down further.
How can I do that???
Thanks...

Tags:
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 39 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

suggestion?

Make the nav and logo absolute withing the pic container. Offset to the bottom. It will scroll with the pics without being annoying.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 17 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

You can add a Jquery like

You can add a Jquery like this inside your website to make it stop untill a certain point on your website, in this case till the end of the image div.

$.fn.followTo = function (pos) {
    var $this = this,
        $window = $(window);
 
    $window.scroll(function (e) {
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'absolute',
                top: pos
            });
        } else {
            $this.css({
                position: 'fixed',
                top: 0
            });
        }
    });
};
 
$('#topwrapper').followTo(250);

I already added your div #topwrapper to the code, you can edit the 250 yourself.
The higher the count, the further it will scroll with you.
Let me know if it helped you out.

Check Maximum Webdesign for your online solutions