On Click Scroll

Hi I have a navigation in my PAGE that I need for it to
to be fixed and scroll to its specific content box when clicked
and align itself like so:

when it gets to the respective content box. I currently have this script:

                                                                                                                                                    $("#button,#button2").click(function() {
    var destination = "#photosinuse";
			if ($(this).attr('id') === 'button2'){destination = "#howtoapply";}
			$('html, body').animate({
        scrollTop: $(destination).offset().top
    }, 2000);
});                                                                                                                                               

For background, see the last posts: Nav to div Scroll

Hi,

You would be better off finding a fully fledged sticky nav script to do this properly as you will need to create a range where the nav becomes fixed.

The following code will do what you want but it could be done a lot better.

Add this css:

#fxd-nav.stickyhead #navbar{
	position: fixed;
	top: 0;
}

Add this script at the bottom of the html.

<script>
//script to create sticky navr 
jQuery(function(){
    createSticky(jQuery("#fxd-nav"));
});

function createSticky(sticky) {
    if (typeof sticky != "undefined") {

        var pos = sticky.offset().top,
				pos2 = 3000, 
        win = jQuery(window);

        win.on("scroll", function() {

            if( win.scrollTop() > pos ) {
                sticky.addClass("stickyhead");
            } else {
                sticky.removeClass("stickyhead");
            } 
						 if( win.scrollTop() > pos2 ) {
                sticky.removeClass("stickyhead");
            }           
        });         
    }
}
</script>

That should give you a start anyway :smile:

Thank You.

Yeah that is what I figured I needed.

How can I control the speed of the slider when it is
clicked? In the javascript

If you are talking about your animated scroll then the 2000 setting in your js is the time in miiliseconds (e.g. 2000 = 2 seconds)

scrollTop: $(destination).offset().top
    }, 2000);

Just change that to what you want.

1 Like

Where exactly do I put between where in the Script?

Also how can I prevent the fixed nav from disappearing when I scroll to the bottom?

You just change 2000 to 100 if you want it to scroll very quick.You already have that code in your original script (unless you have removed it since I first checked).

Remove this part of code from the script I gave you.

 if( win.scrollTop() > pos2 ) {
                sticky.removeClass("stickyhead");}

The problem is that f you remove that then when your full width footer scrolls into view it will go over the fixed nav. Usually when you have these floating/fixed navs you keep a gangway clear for it so content doesn’t overlap.

Hi,

Here’s an attempt to keep the sidenav nav within range and not overlap the footer.

Remove the sticky nav code I gave before and try this:

//script to create sticky nav
jQuery(function() {
    createSticky(jQuery("#fxd-nav"));
});

function createSticky(sticky) {
    if (typeof sticky != "undefined") {

        var pos = sticky.offset().top,
            pos2 = $('.prd-options').offset().top - $('.prd-options').height(),
            win = jQuery(window);
        win.on("scroll", function() {

            if (win.scrollTop() > pos) {
                sticky.addClass("stickyhead");
                sticky.removeClass("stickyhead2");
            } else {
                sticky.removeClass("stickyhead");
            }
            if (win.scrollTop() > pos2) {
                sticky.removeClass("stickyhead");
                sticky.addClass("stickyhead2");
                $('#fxd-nav #navbar').css('top', pos2 - $('.prd-options').height() + 35 + "px");
            }
            if (win.scrollTop() < pos2 && win.scrollTop() > pos) {
                sticky.addClass("stickyhead");
                sticky.removeClass("stickyhead2");
                $('#fxd-nav #navbar').css('top', 0);
            }

        });
    }
}

Then change the css I gave you to this.

#productpages_wrap{position:relative}
ul#main-menu {margin:0;padding:0}
#fxd-nav{left:1040px}
#fxd-nav.stickyhead #navbar{
	position: fixed;
	top: 0;
}
#fxd-nav.stickyhead2 #navbar{
position:absolute;
width:160px;	
}

I’m sure it could be done neater but the above seems to work.
(You seem to have removed the scroll effect)

Seems like giving this height is cutting off the nav in the last box on some of my pages. The height is varies on
some of the pages for the ‘Specifications’ section…

Yeah I don’t see it at all in the latest script.

Right I had that problem before.

Do you mean its just moved up a bit or is something cut off?

I couldn’t see anything cut off as such but the menu does move a little on other pages I looked at.

I’m not sure we can make it exact unless the page structure is changed a little which would mean changing all pages to match. The nav needs to track the height of the middle section and then makes its adjustments based on that. At present it just looks to see if the page has scrolled down to prd-options and sets the top position of the nav to match.

I’d probably need to get this working on a stand alone demo first to make sure its working as I expected but that will have to wait a day as I am out tomorrow.

Yeah I mean it is moved up on some pages.

I see ok.

Hi,

Try this new script for the sticky nav to see if it works better.

//script to create sticky nav
jQuery(function(){
    createSticky(jQuery("#fxd-nav"));
});

function createSticky(sticky) {
    if (typeof sticky != "undefined") {

        var pos = sticky.offset().top,
				pos2 = $('.prd-options').offset().top -  $('#fxd-nav').height() + 25,
				pos3 = pos2 - $('#fxd-nav').height(),
        win = jQuery(window);
        win.on("scroll", function() {


            if( win.scrollTop() > pos ) {
                sticky.addClass("stickyhead");
								sticky.removeClass("stickyhead2");
            } else {
                sticky.removeClass("stickyhead");
            } 
						 if( win.scrollTop() > pos2 ) {
                sticky.removeClass("stickyhead");
								sticky.addClass("stickyhead2");
								$('#fxd-nav #navbar').css('top', pos3 + "px");
            }
						 if( win.scrollTop() < pos2 && win.scrollTop() > pos) {
							  sticky.addClass("stickyhead");
								sticky.removeClass("stickyhead2");
								$('#fxd-nav #navbar').css('top', 0);
            }  
						           
        });         
    }
}

It’s a little awkward because of the structure of the page.

Yeah it is much better Thank You for that…it shifts its width when
I get to the bottom though is it suppose to do that?

Yeah Its because the content of each page will vary maybe that is
the cause thus creating different heights of the pages.

You probably need to set the width for that element from the start and make sure it matches the width I set. I’ll have a look tomorrow when I get a few spare minutes.

1 Like

It seems to be staying the same with now.

Yeah I changed it it worked out thanks! :smile:

Hello, Where can I put this script code to control the
transition speed of the nav when clicked?

scrollTop: $(destination).offset().top
    }, 2000);

In here:

//script to create sticky nav
jQuery(function(){
    createSticky(jQuery("#fxd-nav"));
});

function createSticky(sticky) {
    if ( $(sticky).length) {
        
        

        var pos = sticky.offset().top,
				pos2 = $('.prd-options').offset().top -  $('#fxd-nav').height() + 25,
				pos3 = pos2 - $('#fxd-nav').height(),
        win = jQuery(window);
        win.on("scroll", function() {


            if( win.scrollTop() > pos ) {
                sticky.addClass("stickyhead");
								sticky.removeClass("stickyhead2");
            } else {
                sticky.removeClass("stickyhead");
            } 
						 if( win.scrollTop() > pos2 ) {
                sticky.removeClass("stickyhead");
								sticky.addClass("stickyhead2");
								$('#fxd-nav #navbar').css('top', pos3 + "px");
            }
						 if( win.scrollTop() < pos2 && win.scrollTop() > pos) {
							  sticky.addClass("stickyhead");
								sticky.removeClass("stickyhead2");
								$('#fxd-nav #navbar').css('top', 0);
            }  
						           
        });         
    }
}

Sorry, I didn’t understand the question?

What has that code got to do with the sticky side nav?

Are you trying to make a link from the sidenav scroll to the destination? If so you already had that code in place in post#1 but you removed it!