Question

我想使用带有粘性div的以下布局 - 我正在使用此示例中的代码：pixelbind - Make a DIV stick when you scroll

当使用固定宽度（以像素为单位）时，它完全按照要求工作，但是我需要它使用百分比，左边div为30％，右边为70％，但是一旦我这样做就会打破粘性div，特别是当调整窗口大小并再次滚动。

我似乎无法让它发挥作用＆amp;我不能用JS。任何帮助非常感谢。下面是一个使用固定宽度的示例：

$(document).ready(function() {
	var s = $("#sticker");
	var pos = s.position();	
	var stickermax = $(document).outerHeight() - $("#catalogue").outerHeight() - s.outerHeight() - 0; //40 value is the total of the top and bottom margin
	$(window).scroll(function() {
		var windowpos = $(window).scrollTop();
		if (windowpos >= pos.top && windowpos < stickermax) {
			s.attr("style", ""); //kill absolute positioning
			s.addClass("stick"); //stick it
		} else if (windowpos >= stickermax) {
			s.removeClass(); //un-stick
			s.css({position: "absolute", top: stickermax + "px"}); //set sticker right above the footer
			
		} else {
			s.removeClass(); //top of page
		}
	});
	//alert(stickermax); //uncomment to show max sticker postition value on doc.ready
});

html, body {
	margin:0;
	padding:0;
}
body {
	font-family:Segoe UI, Lucida Grande, sans-serif;
	font-size:13px;
	color:#444444;
	line-height:18px;
}

div#wrapper {
	margin:0 auto;
	width:900px;
	background:#FFF;
	background-color:#0F3;
}

div#brand-detail {
	width:560px;
	padding:0px;
	float:right;
	background-color:#FFF;
	padding:20px;

}

div#brand-bio {
	width:230px;
	float:left;
	/*padding:20px;*/
	margin-left:30px;
}

.clear { 
	clear:both; 
}

div#sticker {
	padding:0;
	margin:0;
	background:#FC0;
	width:190px;
	padding:20px;
	/*margin:20px 0;*/
}

.stick {
	position:fixed;
	top:0px;
}

#catalogue {
	background:#999999;
	height:1000px;
	width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">

    <div id="brand-bio">
    	<!--<h2>brand bio</h2>
        <p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum.</p>-->
        <div id="sticker">
       	    <p>stuff</p>
            <p>stuff</p>
            <p>stuff</p>
            <p>stuff</p>
            <p>stuff</p>
            <p>stuff</p>
            <p>stuff</p>
            <p>stuff</p>
            <p>stuff</p>
            <p>stuff</p>
            <p>stuff</p>
            <p>stuff</p>
            <p>stuff</p>
            <p>stuff</p>
            <p>stuff</p>
        </div>
    </div>
    
	<div id="brand-detail">
    	<h1>Main Content</h1>
    	<p>Here's some content, but that's not really important. The sidebar has a div a few lines down with an ID of &quot;sticker&quot;. Once this div gets to the top of the page, it will stick there. This is a great way to show advertisements without worrying that your audience may quickly scroll past them.  Could also play nicely as navigation helpers.</p>
        <p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
        <p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
        <p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
        <p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
        <p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
        <p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
        <p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
        <p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
    </div>

    <div class="clear"></div>
    
</div><!--/wrapper-->
<div id="catalogue">
       more stuff
            
</div>

Answer 1

也许你应该只浮动菜单并转发CSS位置：粘贴。

您也可以使用最小宽度。

一些阅读帮助：https://www.sitepoint.com/css-position-sticky-introduction-polyfills/和https://www.sitepoint.com/understanding-block-formatting-contexts-in-css/

以完整页面模式运行代码段并调整窗口大小以查看行为，菜单宽度为30％且至少为160px ..

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: Segoe UI, Lucida Grande, sans-serif;
  font-size: 13px;
  color: #444444;
  line-height: 18px;
}
div#wrapper {
  margin: 0 auto;
  background: #FFF;
  background-color: #0F3;
}
div#brand-detail {
  overflow: hidden;
  background-color: #FFF;
  padding: 20px;
}
div#brand-bio {
  width: 30%;
  min-width: 160px;/* set any min-width */
  float: left;
  margin-left: 30px;
  position: sticky;
  top: 0px;
}
.clear {
  clear: both;
}
div#sticker {
  padding: 0;
  margin: 0 30px 0 0;
  background: #FC0;
  padding: 20px;
}
#catalogue {
  background: #999999;
  height: 1000px;
  width: 100%;
}

＆＃13;

<div id="wrapper">

  <div id="brand-bio">
    <!--<h2>brand bio</h2>
        <p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum.</p>-->
    <div id="sticker">
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
      <p>stuff</p>
    </div>
  </div>

  <div id="brand-detail">
    <h1>Main Content</h1>
    <p>Here's some content, but that's not really important. The sidebar has a div a few lines down with an ID of &quot;sticker&quot;. Once this div gets to the top of the page, it will stick there. This is a great way to show advertisements without worrying
      that your audience may quickly scroll past them. Could also play nicely as navigation helpers.</p>
    <p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium
      dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum
      magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
    <p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium
      dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum
      magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
    <p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium
      dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum
      magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
    <p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium
      dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum
      magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
    <p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium
      dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum
      magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
    <p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium
      dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum
      magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
    <p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium
      dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum
      magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
    <p>Fusce fringilla venenatis enim. Etiam vel risus vitae orci aliquet pharetra. Suspendisse vel eros a tortor ultrices luctus eget et ante. Integer nec odio ipsum. Duis eu felis ut elit cursus pellentesque. Etiam elementum eleifend molestie. Aenean pretium
      dolor sit amet massa iaculis ultrices congue mauris molestie. Aenean elit metus, facilisis non semper sed, lobortis eget mauris. Quisque molestie ultrices odio eget lobortis. Fusce a ultrices nulla. In hac habitasse platea dictumst. Sed elementum
      magna lorem. Vestibulum arcu nibh, rutrum porttitor pretium at, laoreet sed mi. Integer eu lacus lorem, vitae euismod felis. Vivamus sit amet orci vel tortor adipiscing hendrerit vel id nunc.</p>
  </div>

  <div class="clear"></div>

</div>
<!--/wrapper-->
<div id="catalogue">
  more stuff

</div>

＆＃13;

百分比宽度打破粘性div

1 个答案: