Ensuring a DIV remains fixed in place for a specific number of scrolls

I'm looking to create a 'Page section' that remains in place while scrolling for a specific distance and then smoothly transitions to the next section. I've attempted to implement this within the child theme without success... Any suggestions on how to achieve this effect without relying heavily on Javascript?

CSS 

.isSticky {
  top: 0;
  position: fixed;
}

HTML

<div>
  <section id="top"></section>
  <section id="test2"></section>
  <section id="bottom"></section>
</div>

JS

$(document).ready(function () {
  var el = $('#test2');
  var elTop = el.position().top;
  $(window).scroll(function () {
    var windowTop = $(window).scrollTop();

    if (windowTop >= elTop) {
      el.addClass('isSticky');
    } else {
      el.removeClass('isSticky');
    }
javascriptjqueryhtmlcsswordpress

Answer №1

This response may not be entirely practical at the moment due to the lack of widespread support, however, in the near future, it will be possible to utilize the position: sticky CSS property, currently functioning in Firefox and with a prefix in Safari/iOS (Caniuse).

The functionality was initially available in Chrome but was later removed for the sake of implementing it more efficiently (source).

html, body {
    margin: 0;
}

body * {
    margin: 20px;
    padding: 20px;
}

.header {
    margin: 0;
    padding: 20px;
    background: #000;
}

.header span {
    display: block;
    color: #fff;
    margin: 0 auto;
    text-align: center;
    padding: 0;
}

.placeholder {
    border: 1px solid black;
    margin: 0 auto;
    text-align: center;
    height: 300px;
}

.slider {
    background: #006264;
    color: white;
    font-weight: bold;
    margin: 0 auto;
    position: sticky;
    top: 0px;
}

<div class="header"><span>This is a header</span></div>
<div class="placeholder">This div holds place</div>
<div class="slider">This should slide up and then stick.</div>
<div class="placeholder">This div holds place</div>
<div class="placeholder">This div holds place</div>
<div class="placeholder">This div holds place</div>
<div class="placeholder">This div holds place</div>

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

Using Scrapy to extract data from Project Euler's website

Currently, I am working on scraping projecteuler.net using Python's scrapy library as a way to practice my skills. While there are existing implementations of similar scrapers online, they seem too complex for my needs. I simply want to save the probl ...

pythonhtmlajaxweb-scrapingscrapy

Ways to send users to a different page with parameters without relying on cookies

Is there a way to redirect users from URLs containing parameters like /?v=xxx to the index page without those parameters showing in the address bar? I still need to retain and use these parameters internally. One approach I considered was using custom hea ...

javascriptnode.jsexpress

Ensure uniform height for images in the absence of specific dimensions

Is there a solution to ensure that images of different sizes have the same height on a card? The issue is that the content is dynamic and coming from a CMS, so I don't know in advance what the image size will be or how much text will be in the card. & ...

cssimagebootstrap-5image-size

Parsley JS failing to validate

I attempted to validate my form using parsley.js, following the instructions from the official documentation. However, for unknown reasons, it is not functioning as expected. Below is the code snippet: <div class="container"> <div class= ...

javascriptjqueryformsvalidationparsley.js

The issue of Jquery selectors not functioning properly when used with variables

Currently working on a script in the console that aims to extract and display the user's chat nickname. Initially, we will attempt to achieve this by copying and pasting paths: We inspect the user's name in the Chrome console and copy its selec ...

javascriptjqueryhtmlvariablesselector

Tips for real-time content updates on a server-side rendered express application

My social media app, built using Express, Pug, and JavaScript for server-side rendering, is fully functional. However, whenever I comment on a post, I need to manually reload the page to see the new comment displayed. I'm exploring ways to dynamicall ...

javascriptnode.jsmongodbexpresspug

How to Assign a Specific ID to the Body Tag in Wordpress Using functions.php

Struggling to find a simple solution after scouring the web for answers. Most tutorials are overly complicated. I'm attempting to integrate a jQuery menu system into my Wordpress site and want to assign a unique body ID to make targeting easier. I p ...

javascriptphpjquerywordpress

Using jQuery to assign a specific value to all select boxes

I am facing a challenge where I need to change the values of all select boxes on my page to a specific number. Here is the HTML structure: <select> <option value="-1" <option value="55">ENABLE</option> <option value= ...

javascriptjquerydrop-down-menu

Performing multiplication and calculating the final sum of an array object in Node JS

I am looking to calculate the total based on an array of objects sum of each row = sum of costs * quantity total = sum of (sum of each row) Below is the object array that I am working with const newArray = [ { 'LOA Qty': '2000', ' ...

javascriptnode.jsreactjs

Retrieve external/parent page

This might be a little confusing, but here's what I've been working on. On my website, I have a main page that uses JQuery.load() to load a secondary php page. The main page's URL is: localhost/piproject/roster.php?id=2 However, when I try ...

phpjquery

Dynamically Alter Notification Background

I have created a demo page with some code for a smart notification. The issue I am facing is that even though the CSS is initially set to black, I want to dynamically change it to a random color upon creation. When I try to do this in the inspector, it w ...

jquerycssnotifications

When viewed on mobile devices, the image shrinks significantly

I'm experiencing an issue where the image shrinks significantly when viewed on a mobile device or when zooming in the browser. Can you help me understand why this is happening and suggest a solution? Here are the HTML and CSS code snippets: HTML < ...

htmlcss

The state remains unchanged when useState is invoked

I am currently designing a unique restaurant website template. As part of the project, I have implemented a modal box with two arrow buttons to navigate between pages. The issue I am facing is that the value of the pageNumber variable, tracked using useSta ...

javascriptreactjsjsxuse-state

Securing a REST API accessible through JavaScript by implementing authentication techniques due to the visibility of the public code

Inquiry: Need advice on securing an internal API intended for AJAX calls made within the website. I have developed a REST API in PHP 7.2 for use with client-side Javascript. Typically, I work on server-side applications where I can control access using a ...

javascriptphpajaxrestauthentication

After a refresh, jQuery's mousenter event is not functioning

I am currently working on a fun project called Etch-a-Sketch for The Odin Project, and I have a jquery grid that can be redrawn with the click of a button. Initially, the grid allows the user to choose the size and then draw on it using .mouseenter. Howev ...

javascriptjqueryhtmlcss

Is Html.Raw necessary for handling ragged html generated by Razor?

When it comes to generating HTML in a dynamic grid model using Razor, the following code snippet is often used: @{ int blockCounter = 0;} @foreach (var item in Model.Items) { if (blockCounter++ % 3 == 0) { //ragged html open here, when needed ...

htmlrazorhtml-helperrazor-2

Retrieve and access an array of objects from MongoDB

Assuming I have some data stored in MongoDB as follows - [ { _id: new ObjectId("63608e3c3b74ed27b5bdf6fa"), latitude: 24.3065, hotels: [ { name: "Saunders Oconnor", lat ...

javascriptnode.jsmongodbexpress

When executing multiple promises in parallel, the function Promise.all() does not support the spread() method

I'm attempting to simultaneously run two promises using sequelize, and then display the results in a .ejs template. However, I keep encountering the following error: Promise.all(...).spread is not a function Below is my code snippet: var environme ...

javascriptnode.jspromisesequelize.js

Developing dynamic tabs with AJAX updates on the frontend in Magento

I'm looking to create ajax updated tabs for the user profile tab on the frontend of Magento, similar to the categories tab in product management. Here is the code I have used: <ul id="page_tabs" class="tabs"> <li> <a id="p ...

phpjquerymagento-1.7

Adjusting the Connection header in a jQuery ajax request

I've been attempting to modify the Connection header using the code below, but so far, I haven't had any success jQuery.ajax({ url: URL, async: boolVariable, beforeSend: function(xhr) { xhr.setRequestHeader("Connection ...

javascriptjqueryxmlhttprequestjquery-1.3