Modifying the verbiage in the menu based on location

Could anyone provide some assistance or guidance on how to solve a small issue I'm facing?

I would like the text in my navigation to change depending on my position on the site (position1, position2 etc.)

Here is a fiddle link for reference: http://jsfiddle.net/iBertel/ah2zj/6/

I need the fixed-nav text to dynamically adjust based on the current position.

EDIT: I have made changes to the fiddle, so it should make more sense now.

HTML

<div class="page-wrap">
    <div class="fixed-nav">
        <span>Position 1</span>
    </div>

    <div id="position1" class="link">
        page 1
    </div>
    <div id="position2" class="link">
        page 2
    </div>
    <div id="position3" class="link">
        page 3
    </div>
    <div id="position4" class="link">
        page 4
    </div>
</div>

CSS

html, body {
    width:100%;
    height:100%;
}
.page-wrap {
    width:100%;
    height:100%;
    position:relative;
}
.fixed-nav {
    position:fixed;
    top:50px;
    left:50px;
    width:100px;
    height:50px;
    background-color:#CCC;
}

.link {
    width:100%;
    height:100%;
    border-top:1px solid #F20;
}

JQUERY

No jQuery code yet - I am unsure where to begin with this.

I hope someone can assist me or point me in the right direction to find a solution to this problem.

Thank you for taking the time to read this. Cheers!

Answer №1

Is it possible to dynamically change the content of your fixed navigation bar based on how far the user has scrolled down the page?

If that's what you're looking for, you can achieve this with the following code:

$(document).ready(function(){
  $(document).scroll(function() {        
    if ($('body').scrollTop() > 600) {
      $('.fixed-nav span').text('Page 3+');
    } else if ($('body').scrollTop() > 200) {
      $('.fixed-nav span').text('Around page 2');
    } else {
      $('.fixed-nav span').text('Looking at page 1, ish.');
    }        
  });
});

Check out this demo on JSFiddle

Edit:

If you are unsure about the height of each 'page', you can use this alternative approach:

$(document).ready(function () {
  $(document).scroll(function () {
    $.each($('.link'), function (index, value) {
      var position = $(this).position();
      var top = position.top;
      var bottom = position.top + $(this).height();

      if ($('body').scrollTop() >= top && $('body').scrollTop() <= bottom) {
        $('.fixed-nav span').text($(this).attr('id'));
        return false;
      }
    });
  });
});

View this updated demo on JSFiddle

This script will update the navigation bar with the ID of the element currently in view as the user scrolls through the page.

Edit:

If you encounter compatibility issues with Firefox, you might need to include the following line of code:

var scrollTop = $(document).scrollTop();

See the revised version on JSFiddle

Answer №2

I believe I grasp your meaning, and I'm pretty sure I've addressed a similar inquiry before.

Perhaps this is what you're looking for...check out the attached Fiddle: Guidelines for implementing a jQuery navigation bar

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When clicked on, the image will expand and require scrolling to see the

Seeking a jQuery plugin that allows for image enlargement upon click, with the added functionality of including a scroll bar within the enlarged image. Any assistance on this matter would be greatly appreciated. ...

How can you apply an active class using React-Router?

My React-Router navigation issue nav.tsx import React from 'react' import { menu } from './menu' import { Link } from 'react-router-dom' import styles from './HamburgerMenu.module.scss' const HamburgerMenu: React.F ...

Problem arising from animation not commencing at expected starting point

Creating a feature on an app that involves breathing exercises using CSS animations. The challenge I'm facing is ensuring the words "exhale" and "inhale" appear synchronously with the animation of a circle shrinking and enlarging. However, the animati ...

When errors occur while printing HTML through an Ajax request, it can hinder the functionality of other JavaScript code

I recently conducted an interesting experiment on my website. The concept involved sending an AJAX request to a PHP file, which then retrieved a random website by using various random words for search queries on Google. The retrieved website content was th ...

Adjust the position of the element by lifting it slightly

I am looking to adjust the positioning of the number "01 / 04" to match the layout shown in this image: Here is what I have accomplished so far: This is how the code structure looks like in vue js at the moment: <img id="theZoomImage" sizes="100vw" : ...

I am looking to transform my string code into a PDF file using an ASP.NET MVC controller by passing the string through an AJAX call to the controller

Currently, I am attempting to change an HTML string into a PDF format using iron PDF within the asp.net-mvc environment. However, since it is only a trial version, could you provide me with an alternative solution to converting an HTML string to a PDF in ...

Problems with select tag change events

I encountered an issue with select tag onChange events. When I select a value from the select tag, it should display in a textbox that is declared in the script. It works perfectly when I remove the class "input" from the select tag, but I prefer not to re ...

navigation bar: retain link hover state even after displaying sub-menu

My navigation bar has submenus with background images in .png format. Only 3 links in my navbar have these submenus. The issue I am facing is that when the menu link is in a hover state and the submenu is being hovered over, the nav link loses its hover st ...

Why is the X-Requested-With header necessary?

Frameworks like JQuery often include the following header: X-Requested-With: XMLHttpRequest But why is this necessary? What reason would a server have for treating AJAX requests differently from regular requests? LATEST UPDATE: I came across an intere ...

The overlay is larger in size compared to the video positioned beneath it

I'm having trouble placing a video underneath a purple layer as the overlay isn't aligning properly with my video. After removing the background-size: cover; in the home section, it appears like this: .videoContainer {} .videoContainer .over ...

What is the formula to determine the precise hue-rotate needed for producing a particular shade?

I'm looking to change the color of a white background image in a div to match the main theme color. I know I can use filters like sepia(), saturate(10000%), and hue-rotate() to achieve this, but is there a way to calculate these values beforehand? Sin ...

Setting table row styles for odd and even rows, based on user clicks of an <input type="file"> button

I'm currently working on a feature that allows users to upload files to a page using an button. Each file is displayed in a table as a new row. I am looking for a way to set the background color differently for odd and even rows. As of now, I am usin ...

Exploring the power of Sitecore in combination with Solr search functionality and Autos

We've integrated Solr Search with Sitecore 8.1 and MVC, but we're encountering difficulties with the Auto complete/Auto Suggestion feature in the search text box. Challenge: The search results are not displaying as quickly as expected, leading t ...

Mapping Functions to HTTP Status Codes

I'm just getting started with my ajax-jquery learning journey. How does jquery determine the success or failure of a request? (When is success called versus when is error called?) I have a hunch that it has something to do with the HTTP status code ...

Positioning JQuery sliders

I've been working on a jQuery slider for my header, but I'm encountering an issue where the previous image drops down to the next container instead of staying in place and transitioning smoothly. It seems like there might be an error in my HTML/C ...

Can Keyboarddatepicker automatically format the date?

We are utilizing material ui Keyboarddatepicker in our React application and have specified the date format using props as format=DD/MMM/YYYY, resulting in dates being displayed like "10/12/2020". The date picker functions perfectly when selecting a date. ...

Prevent floating labels from reverting to their initial position

Issue with Form Labels I am currently in the process of creating a login form that utilizes labels as placeholders. The reason for this choice is because the labels will need to be translated and our JavaScript cannot target the placeholder text or our de ...

PHP function that utilizes the header("X-sendfile") to return an image may display null during the initial iteration, but will successfully return the binary file on the subsequent iteration

My current project involves a gallery app with thumbnails that fetch the original images via an AJAX call to showfile.php. The first return works fine, but subsequent calls result in incorrect values and script breakage (initially returns "null," then bina ...

Storing input field values in JavaScript using the onchange event handler.Would you like a different revision

I am looking to calculate the area by multiplying width and height entered into input fields, and then display the result. Any guidance would be greatly appreciated. Thank you! Here is my current code. const width = document.querySelector("#width"); con ...

Troubleshooting: My jQuery script for fading in content upon document ready is not

I'm currently working on a website where I want everything to fade in when the user enters the site. Take a look at my code: var celyLogin = $(".container"); $(document).ready(function () { /*! Fades in page on load */ $("container") ...