修復頁面中的容器並在頁面上附加到頁腳

Question

我想修復包含信息並將其附加到頁腳的側滾動，同時如果網頁內容更改仍保持連接狀態。

我得到這個問題我的權利滾動包含信息徘徊在我的頁腳截圖頂部附加下面。 [正如你所看到的信息卡與頁腳重合，請你能告訴解決？] [1]

代碼是這樣的：

var headerscroll = document.getElementById("headerscroll"); 
 
// alert(headerscroll.lenght) 
 
var myScrollFunc = function() { 
 
    var y = window.scrollY; 
 
    //alert(y); 
 
    if (y >= 321 && y < 1700) { 
 

 
    $("#headerscroll").css('background-color', '#323232 '); 
 
    $("#cooper-crash").css('color', 'white'); 
 
    $("#cooper-crash").css('font-size', '18px'); 
 
    $("#headerscroll").css('height', '98px'); 
 
    $("#headerscroll").css('position', 'fixed'); 
 
    $("#headerscroll").css('display', 'block'); 
 
    $("#learnmore").css('display', 'block'); 
 
    $("#learnmore").css('color', '#fff'); 
 
    $("#cooper-enroll-text").css('display', 'block'); 
 
    $("#cooper-enroll-text").css('top', '28px'); 
 
    $("#sendquery").css('display', 'fixed'); 
 
    $("#sendquery").css('top', '360px'); 
 
    $("#sendquery").css('right', '75px'); 
 
    $("#cooper-enroll-text").css('z-index', '20'); 
 
    $("#cooper-enroll-text").css('background-color', '#fff'); 
 
    $("#cooper-enroll-text").css('border', '1px solid #dedede'); 
 
    $("#cooper-enroll-text").css('width', '30%'); 
 
    $(".cooper-wishlist").css('display', 'none'); 
 
    $(".header-section-color").css('display', 'none'); 
 
    $("#cooper-enroll-text").css('position', 'fixed'); 
 
    $("#sendquery").css('position', 'fixed'); 
 
    $(".cooper_text").css('z-index', '-1'); 
 
    $(".cooper-enroll").css('z-index', '1'); 
 
    $(".cooper-back").css('top', '-30px'); 
 
    $(".cooper-image").css('display', 'none'); 
 
    $("#learndetail").css('display', 'none'); 
 
    $(".popover").css('display', 'none'); 
 
    $("#cooper-enroll-text").css('right', '72px'); 
 

 

 

 

 
    } else if (y > 1700) 
 

 
    { 
 
    //alert(y); 
 

 
    $("#headerscroll").css('top', '1700px'); 
 
    $("#headerscroll").css('position', 'fixed'); 
 

 
    $("#cooper-enroll-text").css('top', '1800px'); 
 
    $("#cooper-enroll-text").css('position', 'relative'); 
 
    $("#cooper-enroll-text").css('z-index', '-1'); 
 
    $("#cooper-enroll-text").css('width', '400px'); 
 
    $("#cooper-enroll-text").css('right', '18px'); 
 

 
    $("#sendquery").css('top', '1800px'); 
 
    $("#sendquery").css('bottom', '800px'); 
 
    $("#sendquery").css('position', 'relative'); 
 
    $("#sendquery").css('z-index', '-1'); 
 
    $(".footer-first").css('z-index', '20'); 
 
    $("#sendquery").css('right', '0px'); 
 

 

 

 
    } else { 
 
    $("#headerscroll").css('background-color', 'silver'); 
 
    $("#cooper-crash").css('color', 'black'); 
 
    $("#cooper-crash").css('font-size', '34px'); 
 
    $("#headerscroll").css('height', '300px'); 
 
    $("#headerscroll").css('position', 'relative'); 
 
    $("#headerscroll").css('display', 'block'); 
 

 
    $(".header-section-color").css('display', 'block'); 
 
    $("#cooper-enroll-text").css('position', 'relative'); 
 
    $("#sendquery").css('position', 'relative'); 
 
    $("#sendquery").css('right', '0px'); 
 
    $(".cooper_text").css('z-index', '0'); 
 
    $(".cooper-enroll").css('z-index', '0'); 
 
    $(".cooper-image").css('display', 'block'); 
 
    $(".coopercenter").css('position', 'relative'); 
 
    $(".cooper-wishlist").css('display', 'block'); 
 
    $("#cooper-enroll-text").css('top', '0px'); 
 
    $("#cooper-enroll-text").css('width', '100%'); 
 
    $("#cooper-enroll-text").css('z-index', '0'); 
 
    $("#learnmore").css('display', 'block'); 
 
    $("#learnmore").css('color', '#000'); 
 
    $("#sendquery").css('top', '0px'); 
 
    $("#cooper-enroll-text").css('border', 'none'); 
 
    $(".cooper-back").css('top', '0px'); 
 
    $("#learndetail").css('display', 'block'); 
 
    $(".customquery").css('left', '0px'); 
 
    $(".popover").css('position', 'relative'); 
 
    $(".popover").css('display', 'block'); 
 
    $("#cooper-enroll-text").css('right', '0px'); 
 
    } 
 

 

 
}; 
 

 
window.addEventListener("scroll", myScrollFunc);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="col-sm-4 cooper-enroll"> 
 

 
    <div class="col-sm-12 cooper-enroll-text"> 
 
    <div><img src="images/security.jpg" class="cooper-image img-responsive"></div> 
 

 
    <div id="cooper-enroll-text"> 
 
     <div class="cooper-enroll-price "> 
 
     <span class="cooper-text-roll">&#8377;700 &nbsp;&nbsp; </span> 
 
     <span class="cooper-text-roll1 ">&#8377;1150 </span> 
 
     <span class="cooper-off"> &nbsp;&nbsp;92% off </span> 
 
     </div> 
 

 
     <div class="cooper-enroll-price"> 
 
     <a href="order-summary.php"> 
 
      <button type="button" class="cooper-enroll-now"> 
 
\t \t \t \t \t \t Enroll Now 
 
\t \t \t \t \t </button><br> 
 
     </a> 
 

 
     </div> 
 

 
     <div class="cooper-enroll-price" style="text-align:center;"> 
 
     <span style="text-align:center;">30-Day Money-Back Guarantee</span> 
 
     </div> 
 

 
     <div class="cooper-enroll-price"> 
 
     <span style="font-weight:bold;">Includes:</span><br> 
 
     <span><i class="fa fa-check cooper-learn-head" aria-hidden="true"></i>&nbsp;&nbsp;34 hours on-demand video</span><br> 
 
     <span><i class="fa fa-check cooper-learn-head" aria-hidden="true"></i>&nbsp;&nbsp;78 Articles</span><br> 
 
     <span><i class="fa fa-check cooper-learn-head" aria-hidden="true"></i>&nbsp;&nbsp;4 Supplemental Resources</span><br> 
 
     <span><i class="fa fa-check cooper-learn-head" aria-hidden="true"></i>&nbsp;&nbsp;Full lifetime access</span><br> 
 
     <span><i class="fa fa-check cooper-learn-head" aria-hidden="true"></i>&nbsp;&nbsp;Access on mobile and TV</span><br> 
 
     <span><i class="fa fa-check cooper-learn-head" aria-hidden="true"></i>&nbsp;&nbsp;Certificate of Completion</span><br> 
 
     </div> 
 

 
     <div class="cooper-enroll-price" style="text-align:center; color:blue;" id="ShowCoupon"> 
 
     <a href="#"><span> Have a Coupon?</span></a> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-12 enroll" id="couponBox"> 
 
     <div class="col-sm-9"> 
 
     <input type="text" class="form-control" placeholder="Coupon Code"> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
     <button type="button" class="btn btn-success">Apply</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div id="sendquery"> 
 
    <div class="col-sm-12 customquery"> 
 
     <h3 style="font-size:20px">SEND US A QUERY</h3> 
 
     <input type="text" class="form-control" placeholder="Name"> 
 
     <input type="text" class="form-control" placeholder="Email"> 
 
     <input type="text" class="form-control" placeholder="Mobile No."> 
 
     <textarea class="form-control" rows="20" id="comment" placeholder="Message"></textarea> 
 
     <button type="button" class="btn btn-success" style="width: 361px;margin-bottom:20px;">Submit</button> 
 
    </div> 
 
    </div> 
 
</div>

我想像這樣的https://www.udemy.com/bootstrap-to-wordpress。 正如您在本網站中看到的那樣，當滾動到底部時，包含圖像和信息的右側滾動條會附加到網頁底部（頁腳）。

Answer 1

只需添加下面的jQuery代碼：

var $window = $(window), 
    $fixElement = $('.el'); 

$window.scroll(function() { 
    if($window.scrollTop() >= $fixElement.offset().top) { 

    /* propably two options */ 

    // if you will use absolute positioning you have to set top position 
    $fixElement.css('top', $window.scrollTop + 10); 

    // if you will use fixed positioning you can just add class 
    $fixElement.addClass('el--fix'); 
    } else { 
    // default 
    } 
}); 

我並不很具體，但我希望我幫助。 :)