-2
我想帶有粘性的div使用下面的佈局 - 我使用的代碼從這個例子：pixelbind - Make a DIV stick when you scroll百分比寬度破粘格
它的工作原理完全一樣像素使用固定寬度的時候，但是我需要需要它使用百分比，左邊的div爲30％，右邊的爲70％，但是一旦我這樣做，它就會打破粘性div，特別是在調整窗口大小和再次滾動時。
我似乎無法得到它的工作&我不能與JS。任何幫助非常感謝。下面是它具有固定寬度工作的例子：
$(document).ready(function() {
\t var s = $("#sticker");
\t var pos = s.position(); \t
\t var stickermax = $(document).outerHeight() - $("#catalogue").outerHeight() - s.outerHeight() - 0; //40 value is the total of the top and bottom margin
\t $(window).scroll(function() {
\t \t var windowpos = $(window).scrollTop();
\t \t if (windowpos >= pos.top && windowpos < stickermax) {
\t \t \t s.attr("style", ""); //kill absolute positioning
\t \t \t s.addClass("stick"); //stick it
\t \t } else if (windowpos >= stickermax) {
\t \t \t s.removeClass(); //un-stick
\t \t \t s.css({position: "absolute", top: stickermax + "px"}); //set sticker right above the footer
\t \t \t
\t \t } else {
\t \t \t s.removeClass(); //top of page
\t \t }
\t });
\t //alert(stickermax); //uncomment to show max sticker postition value on doc.ready
});html, body {
\t margin:0;
\t padding:0;
}
body {
\t font-family:Segoe UI, Lucida Grande, sans-serif;
\t font-size:13px;
\t color:#444444;
\t line-height:18px;
}
div#wrapper {
\t margin:0 auto;
\t width:900px;
\t background:#FFF;
\t background-color:#0F3;
}
div#brand-detail {
\t width:560px;
\t padding:0px;
\t float:right;
\t background-color:#FFF;
\t padding:20px;
}
div#brand-bio {
\t width:230px;
\t float:left;
\t /*padding:20px;*/
\t margin-left:30px;
}
.clear {
\t clear:both;
}
div#sticker {
\t padding:0;
\t margin:0;
\t background:#FC0;
\t width:190px;
\t padding:20px;
\t /*margin:20px 0;*/
}
.stick {
\t position:fixed;
\t top:0px;
}
#catalogue {
\t background:#999999;
\t height:1000px;
\t 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">
\t <!--<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">
\t <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>
\t <div id="brand-detail">
\t <h1>Main Content</h1>
\t <p>Here's some content, but that's not really important. The sidebar has a div a few lines down with an ID of "sticker". 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>
這個解決方案怎麼樣「破」了，結果是什麼？ –
@André解決方案正常工作，因爲我發佈了它，但我需要使佈局響應，但是當我嘗試使用％寬度它打破... –