Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Zlatko Iliev
12,236 PointsHow to detect #id on scrolling in the window?
I want to make one page website and I have also navigation on the left side built from radio buttons. When user click on a radio button the page scroll down and the dot in the radio button moves according to the page you are on. This is the effect I was looking for but it doesn't work when I scroll. How can I make it work also on scrolling and change the dot in the radio button when it detects for instance id="home" ?!? I am using JQuery!
Here is my HTML code:
<body> <div class="checkbox clearfix"> <ul> <li class="selected"><a href="#header"></a></li> <li><a href="#about"></a></li> <li><a href="#hotels"></a></li> <li><a href="#contacts"></a></li> </ul> </div> <section id="header" class="clearfix"> <div class="container"> <img src="img/new_york.png" alt="New York title" class="title"> <a href="#" class="login">BIG LOGIN BUTTON</a> </div> <div class="placeholder"> <span class="arrow"></span> </div> </section>
<section id="about" class="clearfix">
<div class="container clearfix">
<h1>ABOUT</h1>
<div class="left">
<img src="img/new_york_statue.png" alt="New York famous taxi">
</div>
<div class="right">
<h2>About New York:</h2>
<p>New York is a state in the Northeastern and Mid-Atlantic regions of the United States. New York is the 27th-most extensive, the fourth-most populous, and the seventh-most densely populated of the 50 United States. New York is bordered by New Jersey and Pennsylvania to the south and Connecticut, Massachusetts, and Vermont to the east. The state has a maritime border with Rhode Island east of Long Island, as well as an international border with the Canadian provinces of Quebec to the north and Ontario to the west and north. The state of New York is often referred to as New York State or the State of New York to distinguish it from New York City, the state's most populous city and its economic hub.</p>
</div>
<div class="left clearfix">
<img src="img/taxi.png" alt="New York famous taxi">
</div>
<div class="right">
<h2>New York Famous Taxi:</h2>
<p>New York is a state in the Northeastern and Mid-Atlantic regions of the United States. New York is the 27th-most extensive, the fourth-most populous, and the seventh-most densely populated of the 50 United States. New York is bordered by New Jersey and Pennsylvania to the south and Connecticut, Massachusetts, and Vermont to the east. The state has a maritime border with Rhode Island east of Long Island, as well as an international border with the Canadian provinces of Quebec to the north and Ontario to the west and north. The state of New York is often referred to as New York State or the State of New York to distinguish it from New York City, the state's most populous city and its economic hub.</p>
</div>
</div>
</section> ....... and so on its total 4 pages
and here is the JQuery part:
$('.checkbox').on("click", "li", function() { //Deselect sibling elements $(this).siblings().removeClass("selected"); //Select clicked element $(this).addClass("selected"); });
3 Answers
Jenny Veens
10,896 PointsHi Zlatko, try the following.
In your click event add this code:
var target = this.hash; // gets the #hash
$target = $(target); //
$('html, body').stop().animate({
'scrollTop': $target.offset().top+2 // scrolls to the link
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
Then add this function:
function onScroll(event){
var scrollPosition = $(document).scrollTop();
$('ul li a').each(function () {
var currentLink = $(this);
var refElement = $(currentLink.attr("href"));
if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
$('ul liv a.active').removeClass('active');
$(this).addClass('active');
}
else{
currentLink.removeClass("active");
}
});
}
Good Luck and let me know if this helps you!
Zlatko Iliev
12,236 PointsHey Jenny, I am sure we are on the right track... just it doesn't work like that. The class="selected" is on the li element. So I just have to change it when the page detects hash tag for the particular page. And also the idea is when I scroll to move the scroller down with one whole page (from hash tag to next hash tag). Maybe here I will use some jquery easing animation for the scrolling.
Jenny Veens
10,896 PointsHi Zlatko,
Maybe look into .parent() to target the li and add the class .selected (.active, or other chosen class). Or possibly look at applying the .selected class to the 'a' tag instead of 'li'.
From what I can tell, since the hash is located in the 'a' tag you're going to have to target it in some way in order to pull it out. Another option might be to select the 'li' and then grab it's children :
var target = $('li.selected').children().hash;
Not sure if the above will work, but just throwing ideas out there. :)
I recently built this page that I think gives a similar effect (the menu text highlights blue when in the relevant section, instead of a radio button, but maybe you're looking for something completely different) redpathcondos.com
Good luck!
Zlatko Iliev
12,236 PointsHi Jenny,
Yes!!!! This is exactly what I want to do, just the navigation is radio buttons on the right side! I will use your idea and try to figure it out but I already have an idea how it will work :))))) you are the best!
Jenny Veens
10,896 PointsYes! Excellent - You're definitely on the right track then. The code that I originally posted is what I used to achieve this effect. I'm sure you'll find a way to adapt it to your own site :)