• 0

How to get my nav marker working again? (jQuery)


Question

I have markers in my nav telling the user where they are at. It works fine when I only use the # once but when I do it mroe than one it does not work anymore. Is there a way I can keep the marker work and have it use more than once?

 

If you don't know what I'm talking about, it's the small circles on the left side on my one page website. I have # links on the slider on top so it will jump to a different part of the page. Circle should be solid when in the right section tag.

 

http://adhesivesquares.com/one-page/

4 answers to this question

Recommended Posts

  • 0
$( window ).scroll(function(){
	if($(window).scrollTop() >= $("#forth").offset().top){
		$('.header').removeClass('darker');
	} else if($( window ).scrollTop() > $("#main").height()){
		$('.header').addClass('darker');
	} else {
		$('.header').removeClass('darker');
	}
});

$( window ).scroll(function(){
	if($(window).scrollTop() >= $("#forth").offset().top){
		$('nav').removeClass('nav-change');
	} else if($( window ).scrollTop() > $("#main").height()){
		$('nav').addClass('nav-change');
	} else {
		$('nav').removeClass('nav-change');
	}
});

Why twice the same thing :s

 

 

Anyway:

$( window ).scroll(function(){
	$("nav ul li a").removeClass("active");
	if($(window).scrollTop() >= $("#forth").offset().top){
		$("nav ul li a[href='#forth']").addClass("active");
	} else if($(window).scrollTop() >= $("#third").offset().top){
		$("nav ul li a[href='#third']").addClass("active");
	} else if($(window).scrollTop() >= $("#secondary").offset().top){
		$("nav ul li a[href='#secondary']").addClass("active");
	} else {
		$("nav ul li a[href='#main']").addClass("active");
	}
});
Edit: changed last if else to if, fixes indicator on page top.
 
There might a better method instead of just offset().top, like looking which section is currently mostly visible, you can try thinking of a method for it yourself else I can write if for you when I have time(gotta go now :P).
  • 0
  On 14/03/2014 at 18:50, Seahorsepip said:

I don't even see any nav markers in the first place :s

 

If you hover over the  line circle on the left it should look like that when it's in each section tag. It works if I don't add the # in the <div id="slider">.

<nav>
		<ul>
			<li><a href="#main"><span>Home</span></a></li>
			<li><a href="#secondary"><span>More Gripping</span></a></li>
			<li><a href="#third"><span>Fast & Easy</span></a></li>
			<li><a href="#forth"><span>Invisible Solution</span></a></li>
		</ul>
	</nav>


$('a[href^="#"]').click(function(event) {
		var id = $(this).attr("href");
		var target = $(id).offset().top;
		$('html, body').animate({scrollTop:target}, 500);
		event.preventDefault();
	});
function getTargetTop(elem){
	var id = elem.attr("hrefvar offset = 60;
	return $(id).offset().top - offset;
}
	$(window).scroll(function(e){
		isSelected($(window).scrollTop())
	});
	var sections;
	$( document ).ready(function() {
		sections = $('a[href^="#"]');
		sections = $('a[href^="."]');
	});
function isSelected(scrolledTo){
	var threshold = 100;
	var i;
	for (i = 0; i < sections.length; i++) {
		var section = $(sections[i]);
		var target = getTargetTop(section);
		if (scrolledTo > target - threshold && scrolledTo < target + threshold) {
			sections.removeClass("active");
			section.addClass("active");
		}
	};
}
  • 0

Thanks, I did two because I'm not good at javascript and it work. I have to get it done before 5pm today. Which I just finish! Too bad I didn't have time to get it responsive.

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • Display Driver Uninstaller (DDU) 18.1.2.3 by Razvan Serea Display Driver Uninstaller (DDU) is a utility for completely removing AMD/NVIDIA/INTEL graphics drivers and related packages from your system, attempting to eliminate all leftovers (including registry entries, folders and files, driver store). Though AMD/NVIDIA/INTEL drivers can usually be removed via the Windows Control Panel, this uninstaller tool was created for situations where standard uninstall fails, or when you need to fully remove NVIDIA or ATI graphics card drivers. After using this driver cleaner, your system will behave as though it’s the first time you’re installing a new driver—similar to a fresh Windows installation. As with all such tools, we recommend creating a restore point beforehand, allowing you to undo changes if issues arise. If you're having trouble installing an older or newer driver, try it—there are reports that it resolves such problems. Recommended usage: The tool can be used in Normal mode but for absolute stability when using DDU, Safemode is always the best. Make a backup or a system restore (but it should normally be pretty safe). It is best to exclude the DDU folder completely from any security software to avoid issues. You do NOT need to uninstall the driver prior using DDU. Requirements: .NET Framework 4.8 Compatible with Windows 7, 8, 8.1, 10, and 11 (32-bit or 64-bit) Note: Using on Insider Preview builds is at your own risk. Display Driver Uninstaller (DDU) 18.1.2.3 changelog: All GPUs: Fixed hardware rescan issue when cleaning all GPUs without restarting or shutting down UI: Added Guru3D mention in the About section. General: Various fixes and enhancements. Download: Display Driver Uninstaller (DDU) 18.1.2.3 | 1.7 MB (Freeware) Download: DDU Portable | 1.2 MB Links: Display Driver Uninstaller Home Page | Screenshot | Forum Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • That would be nice, if excel could refresh pivot tables without bugs. Frequently you refresh a pivot and all parameters get lost. Now this will happen automatically. Bravo MS!
    • If one could ever put all the crap of the world in one box, that would be Microsoft.
    • The most corrupt and vile CEO any company ever had ! The only company that makes an insane amount of money decade after decade but doesn't deliver on even barely passable quality to customers, screws over partners and treats employees like trash
  • Recent Achievements

    • Dedicated
      Profit earned a badge
      Dedicated
    • One Month Later
      hhgygy earned a badge
      One Month Later
    • Week One Done
      hhgygy earned a badge
      Week One Done
    • One Year In
      NIKI77 earned a badge
      One Year In
    • Week One Done
      artistro08 earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      631
    2. 2
      ATLien_0
      237
    3. 3
      Xenon
      167
    4. 4
      neufuse
      146
    5. 5
      +FloatingFatMan
      123
  • Tell a friend

    Love Neowin? Tell a friend!