Tips for keeping a div element at the top of the page

Question

Tips for keeping a div element at the top of the page

I am looking to have a div stick to the top of the page when someone scrolls down

When the page is scrolled, the green div with class stickdiv should automatically stick to the top

var left = document.getElementsByClassName("stickdiv");

for( var i = 0;i<left.length;i++){
var stop = (left[0].offsetTop);

window.onscroll = function (e) {
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
    if (scrollTop >= stop) {
     left.className += " stick"; //adding a class name
    } else {
        className = '';
    }

}
}

Why does adding the stick class to the div not work? - https://jsfiddle.net/kzk5qab2/1/

I want the div to stick at the top like the yellow div in this example - http://jsfiddle.net/qc4NR/

javascript html css

Answer 1

Answer №1

You've entered the array of left elements, but forgot to specify the array index when attempting to apply the class name to the element.

var left = document.getElementsByClassName("stickdiv");

for (var i = 0; i < left.length; i++) {
  var stop = (left[0].offsetTop);

  window.onscroll = function(e) {
    var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
    
    if (scrollTop >= stop) {
      left[0].classList.add('stick'); //applying a class name
    } else {
      left[0].classList.remove('stick');
    }
  }
}

.stickdiv {
  height: 50vh!important;
  width: 100vh!important;
  background-color: green!important;
}
.stick {
  position: fixed;
  top: 0;
  margin: 0 0
}
#right {
  float: right;
  width: 100px;
  height: 1000px;
  background: red;
}
.des {
  height: 300px;
  width: 100%;
  background-color: #000;
}

<div class="des"></div>
<div class="stickdiv"></div>
<div id="right"></div>

If you directly select the item, you don't even need to loop through, as shown below:

var left = document.querySelector(".stickdiv");
var stop = (left.offsetTop);

window.onscroll = function(e) {
  var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

  if (scrollTop >= stop) {
    left.classList.add('stick'); //applying a class name
  } else {
    left.classList.remove('stick');
  }
}

Answer 2

You've entered the array of left elements, but forgot to specify the array index when attempting to apply the class name to the element.

var left = document.getElementsByClassName("stickdiv");

for (var i = 0; i < left.length; i++) {
  var stop = (left[0].offsetTop);

  window.onscroll = function(e) {
    var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
    
    if (scrollTop >= stop) {
      left[0].classList.add('stick'); //applying a class name
    } else {
      left[0].classList.remove('stick');
    }
  }
}

.stickdiv {
  height: 50vh!important;
  width: 100vh!important;
  background-color: green!important;
}
.stick {
  position: fixed;
  top: 0;
  margin: 0 0
}
#right {
  float: right;
  width: 100px;
  height: 1000px;
  background: red;
}
.des {
  height: 300px;
  width: 100%;
  background-color: #000;
}

<div class="des"></div>
<div class="stickdiv"></div>
<div id="right"></div>

If you directly select the item, you don't even need to loop through, as shown below:

var left = document.querySelector(".stickdiv");
var stop = (left.offsetTop);

window.onscroll = function(e) {
  var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

  if (scrollTop >= stop) {
    left.classList.add('stick'); //applying a class name
  } else {
    left.classList.remove('stick');
  }
}

Answer 3

Answer №2

If you want to support different browsers, you may not actually need JavaScript for this task.

.sticky {
    position: sticky;
    left: 0;
    top: 0;
    width: 100%;
}

Check out the Codepen example here: https://codepen.io/afisher88/pen/xJaxoP

For information on browser support regarding position sticky, visit: https://caniuse.com/#search=position%3A%20sticky

Answer 4

If you want to support different browsers, you may not actually need JavaScript for this task.

.sticky {
    position: sticky;
    left: 0;
    top: 0;
    width: 100%;
}

Check out the Codepen example here: https://codepen.io/afisher88/pen/xJaxoP

For information on browser support regarding position sticky, visit: https://caniuse.com/#search=position%3A%20sticky

Tips for keeping a div element at the top of the page

Answer №1

Answer №2

Similar questions

Utilize AJAX to accurately capture and handle error codes

A warning has been issued: CommonsChunkPlugin will now only accept one argument

Challenges with compiling Next.js with Tailwindcss and Sass

Tips for evaluating style modifications on mouseover using cypress

Static addition of the Button to the parent div is crucial for seamless

The scrollHeight property for a textarea element that is set as

Toggling designs with a simple click

What is the method for changing the color of a specific section of a header?

Issue: Unable to locate module 'js-yaml' while executing npm start command

Bug with the button and text input feature in Firefox

The deprecated body parser is throwing an error due to the lack of the extended option

Calculator: Show individual digits once more following a calculation

SwiperJS continuously applies additional right margin to every slide

What are the best ways to integrate markdown into my Vue.js projects?

Is there a way to determine if my great-grandfather has a class attribute that includes a specific word?

What is the best method for excluding past dates in the Ui calendar?

Selecting an option from dropdown1 to retrieve a specific value from a JSON file

Pass the selected ID from a Vue.js select component to an Axios post request and then render another select

In JavaScript, a prompt is used to request the user to input a CSS property. If the input is incorrect,

Tips on creating a blurred background effect when an HTML popup modal is activated