csosa
July 21, 2015, 5:13pm
1
Hi I have a navigation in my PAGE that I need for it to
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);
});
ronpat
July 21, 2015, 5:16pm
2
For background, see the last posts: Nav to div Scroll
PaulOB
July 21, 2015, 8:00pm
3
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
csosa
July 21, 2015, 8:01pm
4
Thank You.
Yeah that is what I figured I needed.
csosa
July 21, 2015, 9:21pm
5
How can I control the speed of the slider when it is
PaulOB
July 22, 2015, 6:19pm
6
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
csosa
July 22, 2015, 7:00pm
7
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?
PaulOB
July 23, 2015, 8:30am
8
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.
PaulOB
July 23, 2015, 11:12am
9
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.
csosa
July 23, 2015, 4:59pm
10
Seems like giving this height is cutting off the nav in the last box on some of my pages. The height is varies on
csosa
July 23, 2015, 4:59pm
11
Yeah I donāt see it at all in the latest script.
Right I had that problem before.
PaulOB
July 23, 2015, 10:02pm
13
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.
csosa
July 23, 2015, 10:17pm
14
Yeah I mean it is moved up on some pages.
PaulOB:
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.
I see ok.
PaulOB
July 24, 2015, 7:33pm
15
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.
csosa
July 24, 2015, 8:32pm
16
Yeah it is much better Thank You for thatā¦it shifts its width when
Yeah Its because the content of each page will vary maybe that is
PaulOB
July 24, 2015, 9:08pm
17
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
PaulOB
July 25, 2015, 11:47am
18
It seems to be staying the same with now.
csosa
July 27, 2015, 6:03pm
19
Yeah I changed it it worked out thanks!
csosa
August 14, 2015, 6:08pm
20
Hello, Where can I put this script code to control the
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);
}
});
}
}
PaulOB
August 14, 2015, 6:49pm
21
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!
