通过JavaScript添加固定位置时粘性div开关侧

Question

我正在尝试实现一个滚动时总是出现在视图中的粘滞div。我的javascript代码运行良好，div实际上是在滚动页面。问题是，当我将position: fixed;应用到类scrolling-panel的粘性分区时，它会将位置从页面的右侧(原始位置)切换到左侧。

这里是我的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;
}

JavaScriptfor粘性scrolling-panel div：

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

如果我还不够清楚，或者你需要更多的信息，请告诉我

Answer 1

而不是margin-right上的元素(在.stick类中)使用right值。

这里有一个小提琴的例子