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

Ways to effectively manage multiple asynchronous operations while retrieving emails and attachments using IMAP and JavaScript

Selenium's xpath feature is designed to target only the elements that are currently visible

Troubleshooting Issue with Public File Serving in ExpressJS Deployment (NodeJS/Express)

Guide on creating a 4-point perspective transform with HTML5 canvas and three.js

Is there a way to adjust the theme color in _variables.scss by recompiling Bootstrap while working with Angular and CSS?

Explain the mechanics of the calculator code operating by inputting numerical values in a string format

Searching for a name in JSON or array data using jQuery can be accomplished by utilizing various methods and functions available

Uploading Files Using the Dropbox API Version 2

Experience the smooth CSS3 transition effects on iOS devices such as iPhones and iPads. Elevate the appearance of DOM objects with

Tips for formatting dates in Angular 6

Incorporating server-side rendered components into a Vue.js parent component

Preventing Repeated Clicks in AngularJS

Can the color of a highchart graph be altered simply by clicking on the line?

The Guide to Utilizing Autonomous Models in Directive

Modify dates on constant URL and run the link

Unexpected behavior with ng-show binding

How can Angular be used to dynamically show or hide an element based on its height?

Postman grants me the cookie, yet Chrome doesn't seem to deliver it

Utilizing Firebase messaging onMessage function is exclusively enabled within a window environment

Issue with MUI Grid item not functioning properly when using overflowY: "auto"