Sticky sidebar navigation paired with a scrollable main content area and anchor links

Examining the fiddle reveals a straightforward page layout with a fixed menu on the left and scrollable content.

I am looking to align the menu with the content without any blank space at the top that causes the menu to shift upwards while scrolling down. Unfortunately, I'm unsure how to remove this space.

Check out the fiddle below:

<nav>

<a href="#" data-scroll="top">Top</a>

<a href="#" data-scroll="news">News</a>

<a href="#" data-scroll="products">Products</a>

<a href="#" data-scroll="contact">Contact</a>

</nav>

<div class="wrapper">

<section id="top" data-anchor="top">
    <h4>TOP</h4>
        <p>Lorem ipsum dolor sit amet,</p>
        <p>Duis vel augue quis elit ultrices fermentum ut eu risus. Mauris dictum nisl </p>
</section>

<section id="news" data-anchor="news">
    <h4>NEWS</h4>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Duis vel augusequis elit ultrices fermentum ut eu risus. </p>
</section>

<section id="products" data-anchor="products">
    <h4>PRODUCTS</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <p>Duis vel augue quis eligultrices fermentum ut eu risus.</p>
</section>

<section id="contact" data-anchor="contact">
    <h4>CONTACT</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque feugiat eleifend orci, eget aliquam dolorelementum vel.</p>
        <p>Duis vel auremagnaliques elit ultrices fermentum ut eu risus.</p>
</section>

http://jsfiddle.net/gUWdJ/1553/

jqueryhtmlcss

Answer №1

Here is a suggestion to try: See Demo

nav {
    position: absolute;
    left: 0;
    right; 0;
    top: 0px; /* changed 100px to 0 */    
    display: block;
    width: 100px;
    padding: 4px 0;
    height: 100px;
    z-index: 100;
    color:pink;
}

UPDATE: View Updated Demo

To change the text highlight, modify this in the javascript code:

if (windscroll >= 100) {

to

if (windscroll >= 0) {

Answer №2

sidebar {
  position: fixed;
  left: 0;
  top: 50px; /* <-- could cause layout issues */
  display: flex;
  width: 200px;
  padding: 8px 0;
  height: 150px;
  z-index: 200;
  color: purple;
}

Answer №3

Eliminate the top:100px line from the CSS code below:

nav {
    position: absolute;
    left: 0;
    right; 0;
    display: block;
    width: 100px;
    padding: 4px 0;
    height: 100px;
    z-index: 100;
    color:pink;
}

DEMO

Answer №4

Modify the following css for navigation bar nav { position: absolute; top: 100px;}

    nav { position: fixed;top: 0;}

See the live demo here

Answer №5

Here is your updated CSS:

body {
    padding: 0;
    margin: 0
}

h4 {
   font-weight: bold;

}

.wrapper {
    width: 400px;
    margin: 0 auto;
    position: relative;
    margin-left:130px;
}

nav {
    position: absolute;
    left: 0;
    right; 0;
    top: 0px;
    display: block;
    width: 100px;
    padding: 4px 0;
    height: 100px;
    z-index: 100;
    color:pink;
}

nav a {
    font-family: helvetica;
    color:pink;    
    padding: 2px; 4px;
    display: block;
    float: left;
    text-decoration: none;
    margin-right: 4px;
    width: 100%;
    font-size:20px;
}

nav a:hover,
nav a.active {
    background: white;
    color:gray; 
}

.fixed {
    position: fixed;
    top: 0
}

Your JavaScript code has been updated as well:

$('nav a').on('click', function() {

    var scrollAnchor = $(this).attr('data-scroll'),
        scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]').offset().top - 28;

    $('body,html').animate({
        scrollTop: scrollPoint
    }, 500);

    return false;
})


$(window).scroll(function() {

    var windscroll = $(window).scrollTop();
    if (windscroll >= 0) {
        $('nav').addClass('fixed');
        $('.wrapper section').each(function(i) {

            if ($(this).position().top <= windscroll + ($(this).index('section'))*(35)) {
                $('nav a.active').removeClass('active');
                $('nav a').eq(i).addClass('active');

            }
        });

    } else {

        $('nav').removeClass('fixed');
        $('nav a.active').removeClass('active');
        $('nav a:first').addClass('active');
    }

}).scroll();

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

What is the best way to choose and style every 2 or 3 child elements or sibling elements?

I have a total of 10 children within a parent div. I am currently applying display: 'flex' and flex-direction: 'row' to every pair of children by wrapping them in separate divs with the class 'flex-row'. Is there a more effici ...

htmlcssreactjsbootstrap-4sass

A complete guide to incorporating Angular to hide a Bootstrap 4 Modal using jQuery

After adding jQuery and Bootstrap to the package, I encountered an issue where the modal function was not working properly. Typescript & HTML import $ from 'jquery'; export class AppComponent { name = 'Angular ...

jqueryangular

Is there a way to perfectly align a left-aligned drawable with a hint in a TextInputEditText and position them closer to the bottom of the text input field?

Struggling to align the drawableLeft horizontally with the hint and bring them closer to the bottom of the TextInputEditText. I have experimented with various attributes but haven't been successful so far. Wondering if I might be overlooking something ...

androidcssxmlandroid-layoutmaterial-ui

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 ...

jquerysolrsitecoresitecore-mvcsitecore8.1

Move the search bar to the left side of the screen instead of the

Is there a way for the search bar in my navbar's dropup menu to transition from right to left? Currently, the dropup menu is positioned on the far right of the screen as desired, but when I click on the search button, the search bar extends off the sc ...

htmlcssbootstrap-5

Counting the number of elements in a list can be problematic when using Firefox

Currently, I am in the process of writing CSS to customize the appearance of an XML document. Specifically, I aim to alter how child elements are displayed and have them resemble HTML OL/UL/LI elements. The structure of my XML file is as follows: <?x ...

cssxmlfirefoxcross-browserpseudo-element

Is it conceivable that Jquery is failing to load for an Ajax request?

I have been experiencing an issue with my jQuery code not working within Ajax requests. The jQuery plugin I am using is FancyBox which can be found at . When calling the FancyBox plugin directly, everything works perfectly and multiple links load the plugi ...

javascriptjqueryajax

Is there a way to automatically scroll vertically to a specific line in HTML?

Trying to explain this is a bit tricky. I am looking to add an element to the HTML that prompts the browser to scroll vertically to its location automatically when loaded, similar to an anchor. So: | visible area | | content html | | content html | ...

javascriptjqueryhtmlcss

"Utilizing the power of Twitter Bootstrap and Snap.js for

I am currently working on integrating Snap.js by jakiestfu with Twitter Bootstrap. I have managed to make it work to some extent (I can slide the content and open a drawer through a click event). However, I am facing a challenge where the drawer content re ...

javascriptcsstwitter-bootstrapsnap.js

Message form with HTML and PHP

Currently, I am developing an HTML form that utilizes PHP to send an email message. While testing in MAMP, I am encountering an issue where I am not receiving a response after clicking on the "send message" button. Any suggestions or guidance on how to res ...

phphtmlforms

Integrate Vue.js with Laravel

Hey there fellow developers, I'm a university student who is new to using frameworks. Recently, I completed a project for my internship using the Laravel framework for the back end. Now, I want to tackle the front end using VueJS. Can anyone guide me ...

htmllaravelvue.js

Leveraging jQuery.ajaxSetup for customizing beforeSend function and modifying outgoing data for AJAX requests

My goal is to develop a universal beforeSend function that modifies the data sent by each jQuery.ajax call. This will allow me to include a custom variable for tracking purposes in every request, regardless of the order they are sent in. For instance, let ...

javascriptjqueryajax

Adjust the height to match the shortest sibling child div height

In my layout, I have multiple rows with each row containing multiple columns. Within each column, there is a div and a paragraph - the div contains an image. My goal is to set the div with the class cover-bg to the lowest height of cover-bg in the same row ...

javascripthtmljquerycss

Coding in HTML for the Font Awesome Plus/Minus Icon Toggle

In my role as a knowledge base manager, I primarily use Adobe RoboHelp and rarely need to utilize HTML outside of the standard editor. However, I am currently working on implementing a dropdown feature that involves changing the font awesome icon from fa-p ...

htmlfont-awesomerobohelp

Here is a way to attach a function to dynamically generated HTML that is returned in an AJAX request

As I was working on a new function development project, I encountered a situation where I had to add a function to dynamically generated HTML through an ajax call. The following is a snippet of the code: $.ajax( 'success': function(data){ ...

javascriptjqueryajax

Attempting to create a dynamic grid layout utilizing CSS to ensure optimal responsiveness

I am working on creating a webpage layout similar to the one in the link below: The maximum width for the layout is set to 1600px. However, I am facing challenges in making it fully responsive. This is because all the boxes are given widths in percentages ...

htmlcss

Two conflicting jQuery plugins are causing issues

In my journey to learn jQuery, I encountered an issue while working on a website that utilizes a scroll function for navigating between pages. The scripts used in this functionality are as follows: <script type="text/javascript" src="js/jquery-1.3.1.mi ...

javascriptjqueryscrollshadowbox

JQuery Mobile Navigation with Bootstrap 3 Sidebar on the Go

While using RoR, I encountered a baffling issue. I have created a new navbar with a sidebar that only displays on mobile and not on desktop. The Turbolink is functioning properly. <%= javascript_include_tag 'application', 'data-turboli ...

javascriptjqueryhtmlruby-on-railsturbolinks

Having trouble getting my Jquery Ajax post request to work with JSON data

I am working on syncing data from my Phonegap app back to the server. I have a PHP script set up on the server to handle the incoming data and now I need to figure out how to post values from my App to this script. Currently, I store my data in a SQLite d ...

javascriptjqueryajaxcordovajquery-mobile

PHP XML loop encountering issues with functionality

Hi there, I'm a newcomer to stackoverflow, but I've been following this site for quite some time. Currently, I'm working on a simple web application that will serve as a catalogue for music tracks, allowing users to add their own tracks afte ...

phpxmlhtml