Is it possible to make an element float or stay fixed on a web page based on the visible section of the page?

This question may be a bit confusing, but I couldn't phrase it any other way.

Check out this link: Configure - Apple Store (U.S.)

On the webpage, the 'Summary' box is positioned below the sub-header and aligns with the content block. When scrolling up, the entire page moves accordingly. However, when the content block scrolls out of view, the summary box remains fixed at the top of the page even as you scroll further.

What is this behavior called and how can it be achieved in a simple, clean manner? I am looking for a jQuery plugin or code snippet rather than plain JavaScript.

javascriptjquerycssxhtml

Answer №1

If you want to achieve a similar effect, use the following code:

$(function () { 
  var $element = $('.fixedElement'), 
      topPosition = $element.offset().top;  

  $(window).scroll(function(e){ 
    if ($(this).scrollTop() > topPosition ){ 
      $element.css({'position': 'fixed', 'top': '0px'}); 
    } else { 
      $element.css({'position': 'absolute', 'top': topPosition}); 
    } 
  }); 
});

View an example here.

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

"Navigation Side Menu: w3-sidebar with hamburger toggle feature

If you are looking to implement the w3-sidebar, you can find it here: https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_over The existing code uses a "hanburger" icon to open the side menu and a "Close X" menu item to close it. To simpl ...

jqueryhtmlcss

cycle through several handlebars entities

Hey friends, I could really use your help right now. I'm attempting to iterate through these objects using handlebars. RowDataPacket { idUser: 1, username: 'xxxxxx', password: 'xxxxx', fullname: 'Julian Rincon'}, RowDat ...

javascriptnode.jsexpresshandlebars.js

How can PHP be used to dynamically style HTML content in order to *reposition* it?

I've been wondering if there's a way to embed CSS styling within the body and pull it into the head tag using PHP, not necessarily through inline styling. Is it possible to execute the PHP before the HTML head tag is parsed? I thought this could ...

javascriptphphtmlcssparsing

Tips on keeping Bootstrap Modals out of your browsing history

Imagine this scenario A visitor lands on Page A, clicks through to Page B, and then engages with a link that triggers a modal (code provided below) <a href="mycontent.html" data-target="#modal_xl" data-toggle="modal" data-backdrop="static">Click me ...

javascriptjquerytwitter-bootstrap

Updating the value of an Angular select on change is not being reflected

If the select element is changed, the value should be set to something different from what was selected. There's a feature in place that only allows 4 item types to be selected at a time; if more than 4 are chosen, the value reverts back to its origin ...

javascripthtmlangulartypescriptangular6

Having trouble parsing the JSON object generated by PHP

After sending a JSON object to a PHP file and receiving a manipulated JSON string in return, I encountered an issue with displaying the data using jQuery: $('button#indexOpener').on('click', function() { var aUsername = $('inp ...

phpjqueryajaxjson

Designating a class for the main block

Having an issue with a slider in uikit. When the slide changes, the visible elements also change their class to uk-active. I'm trying to select the central element from the active ones but css nth-child doesn't work. Any suggestions on how to do ...

javascriptjquerycss

Find out the count of div elements using jQuery

I am utilizing jQuery Tools () for creating tooltips. In my js file, I have included the following code snippets: $("div#example-0").tooltip('#example-0-tooltip'); $("div#example-1").tooltip('#example-1-tooltip'); $("div#example-2").to ...

jquery

When combining the Fat-Free Framework with JQuery AJAX GET, there is a lack of response

I have a defined Fat-Free Framework class in my main index.php: $f3->map('/user', 'User'); The code for the User class is shown below: <?php class User { function __construct($f3) { $this->users = new \DB&bs ...

javascriptphpjqueryajaxfat-free-framework

Simple user interface height to occupy the entire browser window

Adding Tabs Dynamically ... I am attempting to design a layout using this example ... however, the issue is that the page does not utilize the full height and width of the available space... I have attempted adjusting the width and height to 100% of the ...

jquerycssjquery-easyui

How to link external css files in a Node.js project

Can I add an external CSS file in node.js using EJS? I attempted to do so, but encountered difficulties: app.use('/static', express.static('/view')) I included the CSS in EJS like this: <link rel="stylesheet" type="text/css" href ...

cssnode.jsexpresssassejs

"jQuery's input type property is not functioning properly when attempting to append new

I am facing an issue with my dynamic table structure and the add row option. Whenever I click on add, a new row is created. However, the problem arises when the $("[name*=vehicle_type]").change(function () does not work for appended input fields. It only ...

javascriptjquery

The component is unable to access VueJS references

Below is a simplified version of the code I am working with: <html> <head> <script src="file:///D:/OtherWork/javascript/vue/vue.js"></script> </head> <body> <div id="app"> & ...

javascriptvue.js

Retrieving information and employing the state hook

Currently, my goal is to retrieve information from an API and utilize that data as state using the useState hook. fetch('https://blockchain.info/ticker') // Execute the fetch function by providing the API URL .then((resp) => resp.json()) // ...

javascriptreactjsapi

Successive Alerts with Material-UI and React-Redux

After realizing that having multiple snackbars scattered across different components was messy, I decided to revamp my app by creating a single custom component that can be called using Redux to display any type of snackbar needed. Desired outcome: I exp ...

javascriptreactjsreact-reduxmaterial-uireact-functional-component

What is preventing me from dynamically generating a property?

As someone who is new to TypeScript, I have a question regarding defining properties. In JavaScript, we can define a property dynamically like this: class Rectangle { constructor(height, width) { this.height = height; this.width = width; } } ...

javascripttypescript

Do you want to reset the validation for the paper input?

I am encountering an issue with a paper-input element in my code. Here is what it looks like: <paper-input id="inputForValidation" required label="this input is manually validated" pattern="[a-zA-Z]*" error-message="letters only!"></paper-input&g ...

javascripthtmlpolymerpolymer-1.0web-component

Display only one dropdown menu at a time

Hey there, I'm currently working on a dropdown menu and struggling to figure out how to keep only one item open at a time. I've tried using an array with useState for all my dropdowns but haven't been able to find a solution yet: code co ...

javascriptreactjs

Positioning div at the top of the body section

Presently, I have this specific designhttps://i.sstatic.net/U4IT4.png The issue I am facing is with the alignment of the jumbotron (boostrap v5). It is currently centered, but I would like it to be positioned at the very top of the body. I have experiment ...

htmlcssfrontendbootstrap-5

Processing multiple input values in an AJAX form using PHP loop

I am struggling to understand how to utilize Ajax for submitting a form within a PHP loop. Can someone please help me figure out why the code below is not writing to my database? When I remove the 'sname' parts, it works but only updates one colu ...

phpjqueryajax