Fix Container in Seite und an der Fußzeile auf Bildlauf

Question

Ich möchte den Seitenroller mit Informationen zu beheben und an die Fußzeile anfügen, während immer noch angeschlossen bleiben, wenn der Inhalt der Webseite geändert wird.

Ich bekomme dieses Problem meine rechte Schriftrolle mit Informationen schwebt über meine Footer Screenshot unten angehängt. [Wie Sie die Informationskarte wird zeitgleich mit der Fußzeile sehen können, können Sie sagen, Sie die Lösung?] [1]

-Code etwas geht:

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>

Ich möchte etwas wie das https://www.udemy.com/bootstrap-to-wordpress. Wie Sie auf dieser Website sehen können, wird die rechte Seite, die Bild und Informationen enthält, beim Scrollen nach unten unten auf der Webseite (Fußzeile) angehängt.

Answer 1

fügen Sie einfach folgenden jQuery-Code:

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 
    } 
}); 

Ich bin nicht genau bestimmt, aber ich hoffe, dass ich geholfen. :)