Question

以下是div <div class="adssec">中右侧的简单.adssec {position: sticky !important;}元素，而我写的function szamolo(){ var sqmeter = $("#new").val(); //#new is my input box id var eredmeny = ((sqmeter *0.8)/1.65); alert(eredmeny); }则是UIImage，但在滚动期间不会粘贴。

我错了什么？

Answer 1

您必须指定要使其粘滞的阈值。来自CSS Tricks：

粘性定位是相对定位和固定定位的混合。该元素被视为相对位置，直到它超过指定的阈值，此时它被视为固定位置。

为粘性元素指定int digit(char letter) { int d = -1; // invalid letter... char const* letters = "0123456789abcdefABCDEF"; char* l = strchr(letters, letter); if(l) { d = l - letters; if(d >= 16) d -= 6; } // alternatively upper case letters, if you prefer... }，top，bottom或left值。

Answer 2

您可以使用位置：已修复。或 position：sticky ，如下例所示。

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>

Answer 3

您是否只想在您提供的位置上保留一个元素？

在这种情况下，position: fixed可以解决问题。

但是，如果您在通过滚动到达页面顶部时尝试让元素停留在页面顶部，那么您应该使用position: sticky。

根据Mozilla开发人员文档

这是一个不应在生产代码中使用的实验性API。

没有posistion: sticky

的可能解决方案

使用一些JavaScript将是一个更好的选择。当元素到达顶部时，将position: fixed添加到样式。

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");
  }
}

Div元素未定位为粘性

3 个答案: