CODEWITHSUNDEEP
htmlcss
Interessante Fakten
Interessante Fakten

Reputation: 49

Div element is not positioned as sticky

Here is buhehe.de a simple div element on the right in <div class="adssec"> and in CSS i wrote .adssec {position: sticky !important;} but it is not sticked during scrolling.

Wwhat did i wrong?

Upvotes: 1

Views: 60

Answers (3)

rpm192
rpm192

Reputation: 2464

Are you trying to just keep an element on the position that you gave it?

In that case position: fixed will do the trick.

However, if you're trying to get an element to stay at the top of the page once it reaches the top of the page by scrolling, then you should use position: sticky.

According to the Mozilla developer docs

This is an experimental API which should not be used in production code.

Possible solution without posistion: sticky

Going with some JavaScript would be a far better option here. When the element reaches the top, add position: fixed to the styles.

window.onscroll = function() {myFunction()};

var div = document.getElementById("myDiv");

var sticky = div.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    div.classList.add("sticky")
  } else {
    div.classList.remove("sticky");
  }
}

Upvotes: 1

Ask Xah
Ask Xah

Reputation: 237

You may use position:fixed. or position:sticky like below example.

body
{
  margin: 0 15%;
  background-color: #ecf0f1;
}
div
{
  border: solid #34495e 1px;
  padding: 0 10px;
  margin: 0 0 10px 0;
  background-color: white;
}
.fixed, .sticky
{
  font-size: 1.4em;
  padding: 10px;
  z-index: 1;
}
.fixed
{
  position: fixed;
  background-color: #34495e;
  color: white;
  width: 100%;
  left: 0;
  text-align: center;
  z-index: 2;
}
.sticky
{
  position: sticky;
  top: 60px;
  background-color: #2ecc71;
}
.container
{
  height: 250px;
  overflow: auto;
}
.out-container
{
  top: 50px;
  background-color: #9b59b6;
  z-index: 2;
}
<html>
<head>
</head>
  <body>
	<div class="fixed">
		Fixed Position
	</div>
	<br/><br/><br/>
	<div>
		<h3>
			Some random content for overflowing the entire content.
		</h3>
		<p>
			There are three responses to a piece of design – yes, no, and WOW! Wow is the one to aim for.
		</p>
		<p>
			Software testing is a sport like hunting, it's bughunting.
		</p>
		<p>
			Java is to JavaScript what Car is to Carpet.
		</p>
		<p>
			Lorem ipsum dolor sit amet, consectetur.
			adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			Ut enim ad minim veniam, quis nostrud exercitation. eiusmod tempor incididunt ut labore
		</p>
	</div>
	<div class="sticky out-container">
		Sticky Positioning
	</div>
	<div class="container">
		<h3>
			Some random content for overflowing the content of this container.
		</h3>
		<p>
			There are three responses to a piece of design – yes, no, and WOW! Wow is the one to aim for.
		</p>		<p>
			Software testing is a sport like hunting, it's bughunting.
		</p>
		<p>
			Java is to JavaScript what Car is to Carpet.
		</p>
		<p>
			Lorem ipsum dolor sit amet, consectetur.
			adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			Ut enim ad minim veniam, quis nostrud exercitation. eiusmod tempor incididunt ut labore
		</p>
		<p>
			Lorem ipsum dolor sit amet, consectetur.
			adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			Ut enim ad minim veniam, quis nostrud exercitation. eiusmod tempor incididunt ut labore
		</p>
		<p>
			Lorem ipsum dolor sit amet, consectetur.
			adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			Ut enim ad minim veniam, quis nostrud exercitation. eiusmod tempor incididunt ut labore
		</p>
		<p>
			Lorem ipsum dolor sit amet, consectetur.
			adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			Ut enim ad minim veniam, quis nostrud exercitation. eiusmod tempor incididunt ut labore
		</p>
	<div>
		<h3>
			Some random content for overflowing the entire content.
		</h3>
		<p>
			There are three responses to a piece of design – yes, no, and WOW! Wow is the one to aim for.
		</p>
		<p>
			Software testing is a sport like hunting, it's bughunting.
		</p>
		<p>
			Java is to JavaScript what Car is to Carpet.
		</p>
		<p>
			Lorem ipsum dolor sit amet, consectetur.
			adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			Ut enim ad minim veniam, quis nostrud exercitation. eiusmod tempor incididunt ut labore
		</p>
	</div>
	<div>
		<h3>
			Some random content for overflowing the entire content.
		</h3>
		<p>
			There are three responses to a piece of design – yes, no, and WOW! Wow is the one to aim for.
		</p>
		<p>
			Software testing is a sport like hunting, it's bughunting.
		</p>
		<p>
			Java is to JavaScript what Car is to Carpet.
		</p>
		<p>
			Lorem ipsum dolor sit amet, consectetur.
			adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			Ut enim ad minim veniam, quis nostrud exercitation. eiusmod tempor incididunt ut labore
		</p>
	</div>
	<div>
		<h3>
			Some random content for overflowing the entire content.
		</h3>
		<p>
			There are three responses to a piece of design – yes, no, and WOW! Wow is the one to aim for.
		</p>
		<p>
			Software testing is a sport like hunting, it's bughunting.
		</p>
		<p>
			Java is to JavaScript what Car is to Carpet.
		</p>
		<p>
			Lorem ipsum dolor sit amet, consectetur.
			adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
			Ut enim ad minim veniam, quis nostrud exercitation. eiusmod tempor incididunt ut labore
		</p>
	</div>
</body>
</html>

Upvotes: 2

abhiox
abhiox

Reputation: 186

You have to specify the threshold at which you want to make it sticky. From CSS Tricks:

Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.

Specify a top, bottom, left or bottom value for the sticky element.

Upvotes: 2

Related Questions