[英]sticky div switches sides when fixed position added via JavaScript
我試圖實現滾動時始終在視圖中存在的粘性div。 我的JavaScript代碼運行正常，並且div確實正在與頁面滾動。 問題是當我申請position: fixed; 到我的粘性scrolling-panel類的div，它將位置從頁面的右側（原始位置）切換到左側。
這是我的HTML（最相關的部分，但仍然有很多標記）
<div class="container">
<div class="main-container">
<div class="row">
<div class="col-md-12">
<img id="brand-logo" src="images/logo.png">
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="container">
<img id='slider-img' src='images/img1.png'>
<div id='left_holder'><img onclick="slider(-1)" class='left' src="images/arrow_left.png"></div>
<div id='right_holder'><img onclick="slider(1)" class='right' src="images/arrow_right.png"></div>
</div>
</div>
</div>
<div class="scrolling-panel">
<h3>Get Started</h3>
<h3>$45</h3>
<p>Join the Club for exclusive pric- ing. See a new box each month and skip if it’s not for you.</p>
<button class="btn btn-success"><small>Join the club + get refresh</small></button>
<p>Want Refresh without joining?
Quick Buy for $55.</p>
</div>
<div class="row">
<div class="col-md-8">
<div class="para-intro">
<h1>REFRESH</h1>
<p>Time to toss the cheap plastic bags -- your dopp kit should be
as composed as the rest of your travel getup. Our friends at
Men’s Journal helped us bring back this classic. Get ready to
breathe new life into your bathroom cabinet and carry-on.</p>
</div>
</div>
<div class="col-md-8">
<div class="sm-content-list">
<ul class="ul-content-list">
<li>DOPP KIT<br>
<span class='doppkit-value'>10"X6"X4"</span></li>
<li>DOUBLE HITTER<br>
2-IN-1 SHAMPOO &<br>
CONDITIONER<br>
<span class='doppkit-value'>8.5oz</span></li>
<li>CLEAN CUT<br>
SEMI-MATTE<br>
STYLING CREAM<br>
<span class='doppkit-value'>3.0oz</span></li>
<li>HANDMADE GOLD<br>
MOSS SOAP<br>
<span class='doppkit-value'>5.0oz</span></li>
<li>FACE WASH<br>
<span class='doppkit-value'>4.4oz</span></li>
<li>LOTION<br>
0.75oz</li>
<li>BODY POWDER<br>
<span class='doppkit-value'>1.0oz</span></li>
</ul>
</div>
<!-- <div class="col-md-5"> -->
<div class="dopp-kit">
<h5>DOPP KIT, <span class='company-color'>BLUE CLAW CO.</span></h5>
<p>Blue Claw's Dopp bag is as resistant to blending in as it is to
wearing down. Designed exclusively for Bespoke, each bag
was painstakingly handcrafted in the good old US of A. The
waterproof exterior is crafted from heavy, 15oz waxed
canvas sourced from family mills in the heartland, while
the full-grain leather handle and pull tab, bronze rivets and
zipper, and signature blue ballistic nylon lining boast a
rugged simplicity. Americana at its best.</p>
<h5>DOPP KIT, <span class='company-color'>BLUE CLAW CO.</span></h5>
<p>Blue Claw's Dopp bag is as resistant to blending in as it is to
wearing down. Designed exclusively for Bespoke, each bag
was painstakingly handcrafted in the good old US of A. The
waterproof exterior is crafted from heavy, 15oz waxed
canvas sourced from family mills in the heartland, while
the full-grain leather handle and pull tab, bronze rivets and
zipper, and signature blue ballistic nylon lining boast a
rugged simplicity. Americana at its best.</p>
<h5>DOPP KIT, <span class='company-color'>BLUE CLAW CO.</span></h5>
<p>Blue Claw's Dopp bag is as resistant to blending in as it is to
wearing down. Designed exclusively for Bespoke, each bag
was painstakingly handcrafted in the good old US of A. The
waterproof exterior is crafted from heavy, 15oz waxed
canvas sourced from family mills in the heartland, while
the full-grain leather handle and pull tab, bronze rivets and
zipper, and signature blue ballistic nylon lining boast a
rugged simplicity. Americana at its best.</p>
</div>
</div>
<div class="col-md-8">
<div class="tabbed-interface">
<div class="appearing-content">
<p>Blue Claw's Dopp bag is as resistant to blending in as it is to wearing down. Designed exclusively for Bespoke, each bag was painstakingly handcrafted in the good old US of A.</p>
</div>
</div>
<div class="clickable-links">
<a class='links-toggle'>blabla</a>
<a class='links-toggle'>blabla</a>
<a class='links-toggle'>blabla</a>
</div>
<div class="changing-para">
<p>Blue Claw's Dopp bag is as resistant to blending in as it is to wearing down. De- signed exclusively for Bespoke, each bag was painstakingly handcrafted in the good old US of A. The waterproof exterior is crafted from heavy, 15oz waxed canvas sourced from family mills in the heartland, while the full-grain leather handle and pull tab, bronze rivets and zipper, and signature blue ballistic nylon lining boast a rugged simplicity. Americana at its best.</p>
</div>
</div>
</div>
<div class='media-objects'>
<h3> From The Post </h3>
<div class="row">
<div class="col-md-3">
<div class="media">
<div class="media-left">
<img class="media-object" src="images/smallimage.png" alt="...">
</div>
<div class="media-body">
<br>
<p>The Perfect Side Part for any Hair Type</p>
</div>
</div>
<div class="media">
<div class="media-left">
<img class="media-object" src="images/smallimage.png" alt="...">
</div>
<div class="media-body">
<br>
<p>Grooming Tips</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="media">
<div class="media-left">
<img class="media-object" src="images/smallimage.png" alt="...">
</div>
<div class="media-body">
<br>
<p>How Soap is Made</p>
</div>
</div>
<div class="media">
<div class="media-left">
<img class="media-object" src="images/smallimage.png" alt="...">
</div>
<div class="media-body">
<br>
<p>Behind the Scenes with Sasquatch Soap</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="media">
<div class="media-left">
<img class="media-object" src="images/smallimage.png" alt="...">
</div>
<div class="media-body">
<br>
<p>Blue Claw's Adam Blitzer Talks Design</p>
</div>
</div>
<div class="media">
<div class="media-left">
<img class="media-object" src="images/smallimage.png" alt="...">
</div>
<div class="media-body">
<br>
<p>How To Shine Your Shoes</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS（也將引導程序用於其網格系統）：
p {
font-family: times;
font-size: 15px;
}
#container {
height: 400px;
width: 650px;
margin: 20px auto 35px auto;
position: relative;
}
.main-container {
margin: 40px 130px 40px 130px;
border: solid black 1px;
}
#slider-img {
height: 400px;
width: 650px;
position: absolute;
}
#left_holder {
height: 400px;
width: 100px;
position: absolute;
left: 0px;
top: 0px;
}
#right_holder {
height: 400px;
width: 100px;
position: absolute;
right: 0px;
top: 0px;
}
.left {
height: 50px;
width: 50px;
position: absolute;
top:40%;
left: 0px;
}
.right {
height: 50px;
width: 50px;
position: absolute;
top:40%;
right: 0px;
}
img#brand-logo {
margin-top: 25px;
margin-left: auto;
margin-right: auto;
display: block;
height: 12px;
width:120px;
}
.para-intro {
margin-left: 110px;
}
.para-intro h1 {
margin-top: 0px;
}
.sm-content-list {
background-color: rgb(240,240,234);
margin-left: 110px;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
ul.ul-content-list {
list-style-type: none;
margin: 0px;
padding: 5px 8px 5px 8px;
}
.ul-content-list li {
font-size: 8px;
font-weight: 600
}
.dopp-kit {
margin-left: 110px;
}
.dopp-kit h5 {
margin-bottom: 2px;
margin-top: 0px;
}
.tabbed-interface {
background-color: blue;
margin-top: 20px;
margin-left: 110px;
height: 250px;
width: 450px;
}
.clickable-links a {
text-align: center;
display: inline-block;
margin-left: 110px;
color: rgb(204,204,204);
hover: none;
}
.clickable-links {
text-align: center;
margin-top: 10px;
}
.changing-para {
margin-left: 110px;
margin-bottom: 20px;
margin-top: 30px;
}
.media-objects {
margin-left: 110px;
margin-bottom: 30px;
}
.media-objects h3 {
margin-bottom: 30px;
}
.media-objects p {
font-size: 12px;
}
.scrolling-panel {
background-color: rgb(240,240,234);
height: 270px;
width: 170px;
float: right;
margin-right: 115px;
text-align: center;
}
.scrolling-panel p {
font-size: 10px;
}
.company-color {
color: rgb(153,66,60);
}
.doppkit-value {
color: rgb(151,151,151);
}
.appearing-content {
color: white;
float: bottom;
}
.stick {
margin-right: 115px;
position:fixed;
top:0px;
}
粘性scrolling-panel div的Javascript：
$(document).ready(function() {
var s = $(".scrolling-panel");
var pos = s.position();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top) {
s.addClass("stick");
} else {
s.removeClass("stick");
}
});
});
讓我知道我是否不夠清楚和/或需要更多信息
代替元素（在.stick類中）的margin-right ，使用right值。
當 position 從固定切換到 static 時，不會出現反向粘性導航欄？
[英]Reverse sticky navbar not appearing when position switches from fixed to static?
通過 JavaScript 更新時固定位置 div 中的按鈕消失（僅在 Firefox 移動瀏覽器中發生）
[英]Button in fixed position div disappears when updated via JavaScript (only occurs in Firefox mobile browser)
如何在容器 div 中將 div 的 position 從固定更改為粘性？
[英]how to change position of a div from fixed to sticky within a container div?
粘貼或固定覆蓋到可滾動div-JavaScript的可見區域
[英]Sticky or fixed overlay to visible area of scrollable div- JavaScript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.