Develop Reference

click nav on position fixed with jquery

I have this CSS code by:
How can I get a fixed address-bar in Google Chrome for Android with javascript
Here is the preview image:
http://s7.picofile.com/file/8388260676/photo.jpg
When I scroll down the page, The code shows < main style="top:2268px;" > ;
But when I click number one, The code shows < main style="top:0px;" >
I want it to be 2268px when I click it.
My code (javascript):
$(window).scroll(function (event) {
var sc = $(window).scrollTop();
// console.log(sc);
$("body main").css('top',sc);
});
$("header .nav-click").click(function(){
$("body main").css('top',sc);
});

Your var cs is local variable. if you want to use it in another function,try to initialize it in the global scope.
Also, You should define it in 'px'. mean add px at the end when you assign it as css
var sc = $(window).scrollTop();
$(window).scroll(function (event) {
sc = $(window).scrollTop();
$("body main").css('top',sc + 'px');
});
$("header .nav-click").click(function(){
$("body main").css('top',sc + 'px');
});

Highlighting current section in navbar

I have a scrolling page with a navbar and I want the section the user is scrolling through to be highlighted in the navbar. At the moment it almost accomplishes this, but is highlighting the incorrect link.
A demonstration is at http://codepen.io/meek/pen/NNprYb?editors=1000
The code that does this is as follows:
// highlight current tab
$(window).on("scroll", function() {
var currentPos = $(window).scrollTop();
$('.nav li a').each(function() {
var sectionLink = $(this);
var section = $(sectionLink.attr('href'));
if(section.position().top <= currentPos && sectionLink.offset().top + section.height() >= currentPos) {
$('.nav li').removeClass('active');
sectionLink.parent().addClass('active');
}
else {
sectionLink.parent().removeClass('active');
}
});
});
I've tried several things, but can't get it to reliably add the active class to the correct session. Help appreciated!
edit: to be clearer, the problem is that it's only highlighting the section when you've scrolled a bit into it, instead of right at the top, meaning that when you click a section to scroll to the top of that section automatically, that section is not highlighted.
edit2: So changing the if statement to:
if(currentPos + $('#nav-wrapper').outerHeight() >= section.position().top && currentPos + $('#nav-wrapper').outerHeight() <= sectionLink.offset().top + section.outerHeight()) {
has made an improvement although not completely fixed the issue. The home, about and portfolio sections all highlight the correct link but not contact.

You need to account for the height of the navbar and subtract it from the top of the section you want highlighted.
The height is currently hardcoded in your CSS at 75px but I included a jQuery selector for the height in case it needs to change/disappear for smaller screens.
Nice work by the way.
$(window).on("scroll", function() {
var currentPos = $(window).scrollTop();
$('.nav li a').each(function() {
var sectionLink = $(this);
// capture the height of the navbar
var navHeight = $('#nav-wrapper').outerHeight() + 1;
var section = $(sectionLink.attr('href'));
// subtract the navbar height from the top of the section
if(section.position().top - navHeight <= currentPos && sectionLink.offset().top + section.height()> currentPos) {
$('.nav li').removeClass('active');
sectionLink.parent().addClass('active');
} else {
sectionLink.parent().removeClass('active');
}
});
});

Menu fixed on single page - change color

i want to create a menu for a single page website with link to div from page.
The menu look like this:
<li>Home</li>
...
<div id="home-link"></div>
I want to change color of link from menu when i am in area of home-link div. How is possible to make that thing?
Thanks for answers and for your help.
Have a nice day.

You will need JavaScript for this if the link element is not a child of #home-link.
Something like this:
$('#home-link').on('hover', function () {
$('li a').css('color', '#bada55');
});
This assumes you are using jQuery, but similar approach with other frameworks would work as well.

If I assume from the question that if you are hovering on #home-link and color of anchor should change, then
$('#home-link').hover(function () {
$('li a').css('color', 'red');
});
or if I assume that if the id is present in your page and you want to change the color of the anchor then
if($('#home-link').length){
$('li a').css('color', 'red');
}

I found myself with (what I believe is) the same question: how can I change which navigation link is highlighted to reflect the area I've scrolled to, whether I get there by using the link or just by scrolling down the page?
Here's a page with a very helpful tutorial.
The theory:
We create an array of all our nav a href’s. We then use some calculations using the scroll function. We find the section id, calculate it’s height, see if it’s greater or less than the value from the window top, and if the window falls in between, we add a class nav-active to the list item in question. We create a conditional also, because if the top of a section is not reached and the page can’t scroll anymore, we want to highlight this section.
And the relevant jQuery code:
/**
* This part handles the highlighting functionality.
* We use the scroll functionality again, some array creation and
* manipulation, class adding and class removing, and conditional testing
*/
var aChildren = $("nav li").children(); // find the a children of the list items
var aArray = []; // create the empty aArray
for (var i=0; i < aChildren.length; i++) {
var aChild = aChildren[i];
var ahref = $(aChild).attr('href');
aArray.push(ahref);
} // this for loop fills the aArray with attribute href values
$(window).scroll(function(){
var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page
var windowHeight = $(window).height(); // get the height of the window
var docHeight = $(document).height();
for (var i=0; i < aArray.length; i++) {
var theID = aArray[i];
var divPos = $(theID).offset().top; // get the offset of the div from the top of page
var divHeight = $(theID).height(); // get the height of the div in question
if (windowPos >= divPos && windowPos < (divPos + divHeight)) {
$("a[href='" + theID + "']").addClass("nav-active");
} else {
$("a[href='" + theID + "']").removeClass("nav-active");
}
}
if(windowPos + windowHeight == docHeight) {
if (!$("nav li:last-child a").hasClass("nav-active")) {
var navActiveCurrent = $(".nav-active").attr("href");
$("a[href='" + navActiveCurrent + "']").removeClass("nav-active");
$("nav li:last-child a").addClass("nav-active");
}
}
});

Make JS detect position on page?

I got a one-page website, before that it had 3 different pages, and the navigation bar's link to the current page turned to ´id="selected´
#selected {
background-color:white;
color: #645406;
cursor: default;
}
when you are on that page.
Now it's a bit harder, as the links work just as anchor links.
I'd need a script that would detect where the user is scrolling, and automatically turn the anchor's link to ´id="selected"´ when the user scrolls over the anchor.
Example:
http://jsfiddle.net/mbSXB/

Try this http://jsfiddle.net/8NKqf/1/
$(function() {
var anchors = $('.anchor');
var navLinks = $('.navigointi a');
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
var clientHeight = document.documentElement.clientHeight;
var activeSectionAnchor, hash;
anchors.each(function() {
if ($(this).offset().top < scrollTop + clientHeight) {
activeSectionAnchor = $(this);
}
});
hash = "#" + activeSectionAnchor.attr('name');
activeLink = navLinks.removeClass('selected').filter('[href="' + hash + '"]');
activeLink.addClass('selected');
});
});

Set anchor as active with jquery

i have short question.. i got 3 content boxes and all have a menu with anchor-links to the
content-boxes below!
when i visit the site the first anchor is set ti active..
when i click now on no.2 in headline 1 it jumps to the 2nd anchor.. but the problem is i have to scroll a little bit above with the mousewheel to set the 2nd anchor as active.
and backwards too.
when i click on box3 at anchor1..
any ideas to solve the problem?
WHEN SCROLLING UP AND DOWN IT WORKS PERFECT! JUST THE JUMP OVER THE ANCHOR MADE PROBLEMS
here is the demo: http://jsfiddle.net/wv9EQ/
here is the javascript code:
$(function(){
var sections = {},
_height = $(window).height(),
i = 0;
//// Grab positions of our sections
$('.section').each(function(){
sections[this.name] = $(this).offset().top;
});
$(document).scroll(function(){
var $this = $(this),
pos = $this.scrollTop();
for(i in sections){
if(sections[i] > pos && sections[i] < pos + _height){
$('a').removeClass('active');
$('.nav_' + i).addClass('active');
}
}
});
});
EDIT: i can't add active to all links! i include this small navi as php and its dynamic for all boxes!
when i set all to active than are all anchors active :D

Just do the same sort of thing when a link is clicked:
$('.head-nav-button').click(function()
{
$('a').removeClass('active');
$('.nav_' + $(this).attr('href').replace('#', '')).addClass('active');
});
http://jsfiddle.net/wv9EQ/7/

for your code use the simple way
http://jsfiddle.net/wv9EQ/4/
<li>2. SP.</li>

Remove this
for(i in sections){
if(sections[i] > pos && sections[i] < pos + _height){
$('a').removeClass('active');
$('.nav_' + i).addClass('active');
}
}
And just add the "active" class where you need it like here http://jsfiddle.net/wv9EQ/6/