Get the adhesive substance to no longer have a sticky texture

I am in the process of creating a portfolio for my upcoming exam. As part of the portfolio, I am required to write several articles. To showcase these articles, I have designed a homepage that displays the different subjects I have covered. When a user clicks on a subject, they are directed to the corresponding article.

On the left side of the page, there is a sticky menu that scrolls along with the user. However, I am facing an issue where the menu continues to scroll even after the article has ended. I would like the menu to stop scrolling at the end of each article, allowing a new chapter menu to appear. Can anyone provide guidance on how to achieve this?

Edit: Here is the code for the menu in HTML, CSS, and JQuery:

jqueryhtmlcssscrollnavigation

Answer №1

Measure the height of the article.

var h = $('articile').height();

Once you have determined the height of the article, instruct your page to change the element's css to relative when you scroll past the article's height.

$(window).scroll(function(){
  if(window).scrollTop() > h){
    $('navbar').css('position','relative');
  }
});

For better help, please share some code.

Answer №2

Not sure what you're dealing with, but here's a potential solution.

If you no longer want it displayed:

$( ".target" ).hide();

If you have access to the code itself, you can execute this. Alternatively, if you're just a user fixated on the scrolling behavior, you can open the browser console and input that code snippet.

If you still want to retain it:

var height = $('.target').height();
$(window).scroll(function(){
  if(window).scrollTop() > height){
    $('.sticky-menu').css('position','relative');
    // Changes the position of the sticky menu to relative when scrolling ends
  }
});

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

tips on sending multiple data- id in a modal window

Let's say I have multiple order IDs $order_id='12345566778'; $prod_id='126778899'; $sell_id='373462562363'; When I select a particular order ID, I want to pass it to a PHP variable located in the modal body of a popup. ...

javascriptphpjqueryhtmlajax

Avoid excessive clicking on a button that initiates an ajax request to prevent spamming

When using two buttons to adjust the quantity of a product and update the price on a digital receipt via ajax, there is an issue when users spam the buttons. The quantity displayed in the input box does not always match what appears on the receipt. For in ...

javascriptjqueryajax

Jquery divides large array into multiple new callbacks during parsing

Encountered a small issue where a JSON response contains a byte array with 67615 entries. Occasionally, it inserts `[....,154,156,);jQuery1910039778258679286416_1363006432850(181,104,...] every ~7300 characters When attempting to parse it using the usua ...

javascriptjqueryasp.netarraysjson

Element remains hidden when position set to relative

I have created a panel inside a container class. The panel's CSS is as follows: .panel { width: 100%; background: url(img/launch1.png); height: 80%; background-size: cover; background-position: center; position: relative; ...

htmlcss

Running Selenium tests are not able to initiate Javascript ajax requests

I'm currently troubleshooting a scenario using Selenium that involves the following steps: - When a user inputs text into a textarea, an ajax request is sent, which then adds the text to the database (implemented using django and processed in view.py) ...

javascriptjqueryajaxdjangoselenium

Implementing microdata without visibly displaying tagged entities on the webpage

I have a query regarding the implementation of Microdata on my webpage where tagged entities are not being displayed. For instance, I want to talk about two individuals in a paragraph without their names appearing on the webpage. Is there a method to only ...

htmlmicrodata

Partial implementation of jQuery datepicker feature facing technical issues

Greetings, I have a functional datepicker implemented in my code as follows: <link rel="stylesheet" href="uidatepicker/themes/blitzer/jquery.ui.all.css"> <script src="uidatepicker/jquery-1.5.1.js"></script> <script src="uidate ...

javascriptjqueryjquery-uidatepickeruidatepicker

CSS - Placeholder styling not being effective when selectors are grouped

Why is Chrome successful at executing this code: .amsearch-input::-webkit-input-placeholder { color: red; } <input class="amsearch-input" placeholder="It works!" /> ...while it doesn't work in other browsers: .amsearch-input::-we ...

cssgoogle-chromevendor-prefix

The file raphael.2.1.0.min.js contains a UTF-8 byte sequence that is not valid

Currently, I am attempting to implement the justgage plugin on my Rails 4 application. However, an error has arisen: raphael.2.1.0.min.js contains an invalid UTF-8 byte sequence The only changes I made to my application.js were: //= require justgage.1 ...

javascriptjqueryruby-on-railsruby-on-rails-4

Are you experiencing issues with Font Awesome Fonts failing to load?

I am currently using a rails app with bower to manage my assets, avoiding gems for JS and CSS. In the directory vender/assets/stylesheets, I have "font-awesome" containing both scss and fonts. In app/assets/stylesheets/application.scss, I have included va ...

htmlcssruby-on-railsfontsfont-awesome

What methods can I employ to restrict access to specific controllers within my MVC3 application?

Currently, I have a dedicated controller for handling AJAX requests in my application. This controller sends and receives JSON data when jQuery makes calls to specific URLs. However, some actions within this controller utilize paid services that I want to ...

jqueryajaxasp.net-mvc-3

Choose the jQuery selector that can target all types of text input fields

Is there a simple method to target all various types of text input fields? For example, <input type= text or email or url or number /> I am not concerned with password fields or textareas. For instance, I currently have this script that selects al ...

jquery

Setting default data in a data table that spans multiple pages is a useful feature that can

I am facing an issue with the default settings in the data table where I need the checkbox to be pre-checked on the controller's side. The problem arises when the checkbox is not staying checked after navigating to the second page and beyond. functi ...

javascriptphphtmldatatable

Stable navigation for seamless website navigation

I am experiencing an issue with the fixed navigation at the top of my site. The navigation links to sections further down on the page, but it overlaps part of the section I link to instead of stopping exactly at the beginning of the section. You can see an ...

htmlcssnavigationhyperlink

Submenu malfunctioning in Internet Explorer and Chrome, but functioning properly in Firefox and Opera

I've been working on some HTML code that runs perfectly in FF and Opera, and even in IE for my friend. However, I'm having trouble getting the output to display properly in Chrome. Any ideas why this might be happening? <html> <head> ...

htmlcssmenusubmenu

What is the right height and width to use in CSS?

I find it challenging to decide when to use rem, em, px, or % in web design. Although I know the definitions of each unit, I struggle with knowing the appropriate situations to utilize them. What guidelines should I follow to determine which one to use? ...

htmlcssheightwidth

Efficiently handling multiple JSON objects in a single PHP function

Currently, I am working on a project that involves populating two dropdown menus where the value of one depends on the other. Specifically, I have three dropdowns - one to select a class, and the other two for selecting subjects and exams based on the sele ...

javascriptphpjqueryjson

Steer clear of moving elements around in d-flex or similar layouts

I am looking to arrange elements in a linear manner with equal spacing between them. While I can achieve this using Bootstrap 5 flex, the spacing changes when the text length of a button is altered. https://i.sstatic.net/kVc8l.png For example, the element ...

htmlcsstwitter-bootstrapbootstrap-5

How to split a webpage down the middle using the CSS Transform Property

Currently, I am wanting to divide my webpage diagonally in half by utilizing the CSS transform property with a -45-degree angle to create the desired effect. ...

htmlcss

Tips for integrating the AJAX response into a Sumo Select dropdown menu

I am currently using Sumoselect for my dropdowns, which can be found at . The dropdowns on my page are named as countries, state, and cities. The countries are shown in the dropdown, and based on the country selected, the corresponding state name should a ...

javascriptjqueryajaxcodeigniter-3sumoselect.js