The anchor link is not aligning properly due to the fluctuating page width

Seeking help to resolve an issue I'm facing. Maybe someone out there has a solution?

The layout consists of a content area on the left (default width=70%) and a menu area on the right (default width=30%).

When scrolling down, the content area expands to 100% width and the menu disappears:

.down .widget-area{
    width: 0;
}

.down .container{
    width: 100%;
}

This works well. However, at the top of the page, there are links to various anchors:

<a href="#header1">GoTo Header 1</a>
<a href="#header2">GoTo Header 2</a>
<a href="#header3">GoTo Header 3</a>

Clicking "GoTo Header 1" link functions correctly. But clicking "GoTo Header 2" leads to misplacement (below the header title) due to the script altering the content area width.

For reference: http://jsfiddle.net/7uouhs6y

If you have any insights or ideas, please share!

javascripthtmlcssscrollanchor

Answer №1

document.onscroll = function(){

    document.querySelector("#content").className = window.pageYOffset >= window.innerHeight ? "down" : "up";
}

The script above adjusts the width of the container when scrolling, setting it to 100% when scrolling down and offset is greater than innerHeight. To prevent this from happening, it is recommended to keep the width at 70%.

Instead of using:

.down .container{
    width: 100%;
}

You should use:

.down .container{
    width: 70%;
}

Additionally, avoid specifying a height for the left div and let it adjust automatically based on the content.

    .container{
        float: left;
        background: red;
      /*height: 300%;*/
    }

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

Encountered an unexpected identifier error while executing a Nuxt.js project

I am utilizing the following technologies: Node.js version 6.14.2 NPM version 6.0.1 Ubuntu 16.04 Whenever I attempt to execute a project, I encounter the following error message: npm run dev node_modules/nuxt/lib/core/module.js:14 async ready( ...

javascriptvue.jsvuejs2nuxt.js

Can I apply a universal babel configuration across all of my personal projects?

It becomes tedious to duplicate the same configuration file for each new project I start. ...

javascriptnpmbabeljs

What is the method to retrieve the value of a JSON object when the key matches the value of another JSON object?

Looking to expand my knowledge in javascript with an interesting challenge. Is there a way to retrieve the value of an object using another object's value as the key? For example: Obj1 = {"name":"John", "age":30, "car":null}; Obj2 = {"John":{"count ...

javascriptjsonvue.js

Inconsistency in Firebase data updates

Hey there, my code snippet below is responsible for capturing latitude and longitude values through a drag-and-drop marker. Although the latitude and longitude are continuously updated in the console when I log them, the same doesn't seem to happen wh ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

Can you merge multiple req.body requests?

I am exploring a scenario where I have a list of items that need to be iterated through, with each item having the value of i added to it to retrieve the next set of information. For example: By concatenating the string "req.body.item" + i + "Title", you ...

javascriptnode.jsexpressbody-parser

Creating a customized Axios instance in Typescript can provide more flexibility and control over

I am looking to create an API with a customizable instance using Axios. Ideally, I want to be able to use a basic instance like this: api.get("url")... In addition, I would like to have the flexibility to add dynamic bodies and access them using something ...

javascripttypescriptaxios

What could be causing the Custom CSS file to stop functioning properly?

Currently, I am in the process of developing an eCommerce website utilizing PHP, Bootstrap, and JQuery. In order to structure the header file for this project, I have followed the following format: <!DOCTYPE html> <html> <head> ...

phphtmljquerycssbootstrap-5

Using database entries to generate dynamic routes in express.js without the need for a server restart

I have created a custom Express instance for my KeystoneJS v5 app that serves data stored in a Postgres database with the following model: CREATE TABLE "Link" ( id integer DEFAULT PRIMARY KEY, customer text, slug text ); I've set up dyna ...

javascriptnode.jsexpresskeystonejs

Live JSON sign-up feature on site

Is there a way to retrieve user email in real-time without using JSON? Currently, I am utilizing JSON for this purpose but it poses the risk of exposing emails that are stored in $resEmailsJson. Ideally, I would like to find a solution to hide all JSON $ ...

javascriptphpjsonajax

jquery activating the toggle function to switch between child elements

I'm facing a challenge where I can't use .children() in this scenario, as it won't work since the elements aren't technically children. Here's the snippet of HTML that I'm working with: <p class="l1">A</p> ...

javascriptjqueryhtml

JavaScript Processing Multiple Input Values to Produce an Output

Hello, I am working on creating a stamp script that will allow users to enter their name and address into three fields. Later, these fields will be displayed in the stamp edition. Currently, I have set up 3 input fields where users can input their data. He ...

javascriptjqueryhtmlcss

Functional Components with Methods in ReactJS

When creating a functional stateless component that requires methods to access props, is there a recommended approach or best practice to follow? For instance: function Stateless(props) { function doSomething(props) { console.log(props); } ...

javascriptreactjs

Nest two div elements within a parent div with varying margins

When trying to nest two divs inside another div with different margins, the second one always aligns according to the first one. For example, if we have divs named 'first' and 'second', we might want a layout like this: seco ...

htmlcss

The issue of the selection option not being cleared after being set to 0 persists in JavaScript

I am facing an issue where I need to reset the select option to `0` when another option is selected. I have tried the code below for this purpose. if (varALPO1MobNum == "0") { var selectElement = $(&apo ...

javascripthtml

Dynamic image gallery with a flexible layout and interactive scrollbar using Flexbox

I'm looking to incorporate a scrolling image gallery into a flexbox layout so that as the browser page size changes, the gallery will scale according to the flex-grow index. My goal is to ensure all images remain accessible via a scrollbar without usi ...

htmlcssflexboxscrollbarimage-gallery

Label it as submit ID rather than value or label

Check out this awesome plugin called https://github.com/aehlke/tag-it. It's really cool! Here is the issue I'm facing: <input type="hidden" name="tags" id="mySingleField" value="Apple, Orange" disabled="true"> Tags:<br ...

javascriptjquerytag-it

How can one use Selenium to verify the existence of an element on a webpage?

Currently, I am developing a program in Selenium with Python and facing an issue. During the test execution, there is a possibility that a button may or may not appear on the webpage based on an unknown parameter. The relevant HTML tag for this button is ...

pythonhtmlselenium-webdriver

The argument represented by 'T' does not align with the parameter represented by 'number' and therefore cannot be assigned

I am confused as to why, in my situation, <T> is considered a number but cannot be assigned to a parameter of type number. Changing the type of n to either number or any resolves the issue. Error: https://i.sstatic.net/h1GE9.png Code: const dropF ...

javascripttypescriptlodashtypescript-generics

React's `setState` function seems to be failing to hold onto

Recently, I've been challenged with creating an infinite scroll loader component. However, I'm facing a peculiar issue where my 'items' array is constantly resetting to [] (empty) instead of appending the new results as intended. A cou ...

javascriptreactjsnext.jsfetch

Changing selections in jQuery may not work properly on certain mobile and IE browsers

I am currently working on creating a dependency between two select boxes. The jQuery code I have implemented works perfectly on most common browsers such as Chrome and Firefox, but it seems to have some issues with Internet Explorer, Edge, and some mobile ...

javascriptjqueryhtmlcss