A specific div remains in place as the user scrolls

Question

A specific div remains in place as the user scrolls

Imagine a div that is positioned 60px from the top of the screen. What if, as you scroll down, it stops when it reaches 10px from the top and remains there for the rest of your scrolling session? And then, when you scroll back up, it goes back to its original position at 60px. I've searched extensively for a solution to this unique functionality but haven't found anything yet. However, there is a code snippet that can calculate the distance from the top:

var scrollTop     = $(window).scrollTop(),
    elementOffset = $('#my-element').offset().top,
    distance      = (elementOffset - scrollTop);

javascript html css

Answer 1

Answer №1

Check out this method using only vanilla JavaScript. If you prefer, you can swap out certain selectors like document.getElementById with jQuery selectors like $("id").

window.onscroll = function(){
  var el = document.getElementById('sticky'),
      s = window.pageYOffset || document.documentElement.scrollTop, // amount page has scrolled
      t = document.getElementById('main').getBoundingClientRect().top; // top of the main div
      
  if(s > t){
    el.style.position = 'fixed'; // change position to fixed from absolute
  }else{
    el.style.position = ''; // clear styles when back to original position
  }
}

body { 
  min-height: 200em; 
  margin: 0;
  padding: 0;
}

header {
  background: black;
  color: white;
  padding: .5em;
}

#main { position: relative; } /* important for sticky box positioning */

#sticky {
    background: cornflowerblue;
    padding: .5em;
    position: absolute;
    right: 1em;
    top: 1em;
    width: 10em;
    color: white;
}

<header>This is just a page header or toolbar.</header>

<section id="main">
  <div id="sticky">This should stick to the top when scrolled.</div>
</section>

Answer 2

Check out this method using only vanilla JavaScript. If you prefer, you can swap out certain selectors like document.getElementById with jQuery selectors like $("id").

window.onscroll = function(){
  var el = document.getElementById('sticky'),
      s = window.pageYOffset || document.documentElement.scrollTop, // amount page has scrolled
      t = document.getElementById('main').getBoundingClientRect().top; // top of the main div
      
  if(s > t){
    el.style.position = 'fixed'; // change position to fixed from absolute
  }else{
    el.style.position = ''; // clear styles when back to original position
  }
}

body { 
  min-height: 200em; 
  margin: 0;
  padding: 0;
}

header {
  background: black;
  color: white;
  padding: .5em;
}

#main { position: relative; } /* important for sticky box positioning */

#sticky {
    background: cornflowerblue;
    padding: .5em;
    position: absolute;
    right: 1em;
    top: 1em;
    width: 10em;
    color: white;
}

<header>This is just a page header or toolbar.</header>

<section id="main">
  <div id="sticky">This should stick to the top when scrolled.</div>
</section>

Answer 3

Answer №2

If the distance from the top of the page is more than 10px, this jQuery solution will add an is-sticky class to the element for styling with CSS.

// save the element in a variable
var element = $('.item'),
    visible = false;

// when scrolling
$(window).scroll(function() {

  /**
   * saves the scroll distance in px
   * from the top of the viewport
   */
  var scroll = $(window).scrollTop();

  /**
   * if the scroll is greater than or equal
   * to 10px, add a class of .is-sticky to the element
   * otherwise, we are less than 10px from the top
   * of the document and therefore do not want
   * the element to have the .is-sticky class
   */
  if(scroll >= 10) {
    if(!visible) {
      element.addClass('is-sticky');
      visible = true;
    }
  } else {
    if(visible) {
      element.removeClass('is-sticky');
      visible = false;
    }
  }
});

Answer 4

If the distance from the top of the page is more than 10px, this jQuery solution will add an is-sticky class to the element for styling with CSS.

// save the element in a variable
var element = $('.item'),
    visible = false;

// when scrolling
$(window).scroll(function() {

  /**
   * saves the scroll distance in px
   * from the top of the viewport
   */
  var scroll = $(window).scrollTop();

  /**
   * if the scroll is greater than or equal
   * to 10px, add a class of .is-sticky to the element
   * otherwise, we are less than 10px from the top
   * of the document and therefore do not want
   * the element to have the .is-sticky class
   */
  if(scroll >= 10) {
    if(!visible) {
      element.addClass('is-sticky');
      visible = true;
    }
  } else {
    if(visible) {
      element.removeClass('is-sticky');
      visible = false;
    }
  }
});

A specific div remains in place as the user scrolls

Answer №1

Answer №2

Similar questions

What is the correct way to run javascript on a DOM element when ng-show is triggered?

Modify session variable upon link click

Cannot Get jQuery .flip() to Work Automatically Every 2 Seconds

Navigation bar's active area does not span the full height

The jQuery Select2 Plugin for Dynamic Dropdowns with Ajax Integration

Show the JSON data that was returned

Bring in the content to Notepad utilizing jQuery

How do I adjust the ul size to be proportionate to the header?

Tips for displaying images dynamically in HTML using AngularJS

Output JSON data from PHP for use in Javascript

Navigate to a specific position with a single click by accessing a class from another Vue component

When the flex-grow property is set to 1, the height of the div extends beyond the space that

Adjust the header and menu color as you scroll

Responsive HTML and CSS Image Gallery without Clickable Images

Is there a way to style alternate iframes using CSS?

What would be an effective method for sending a multitude of parameters to a controller?

React is throwing an error because it cannot access the property 'length' of an undefined value

Using this functionality on a ReactJS Functional Component

Is there a way to stop these symbols (♈♉♊♋♌♍♎♏♐♑♒♓) from being substituted with emojis?

Type of result from a function that returns a linked promise