我想修复包含信息的侧边滚动并将其附加到页脚，同时在网页内容更改时仍保持附加状态。
我遇到了这个问题，我的右滚动条包含信息悬停在下面附上的页脚屏幕截图的顶部。 [看到信息卡和页脚重合了，请问解决方法是什么？][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">₹700 </span>
<span class="cooper-text-roll1 ">₹1150 </span>
<span class="cooper-off"> 92% off </span>
</div>
<div class="cooper-enroll-price">
<a href="order-summary.php">
<button type="button" class="cooper-enroll-now">
Enroll Now
</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> 34 hours on-demand video</span><br>
<span><i class="fa fa-check cooper-learn-head" aria-hidden="true"></i> 78 Articles</span><br>
<span><i class="fa fa-check cooper-learn-head" aria-hidden="true"></i> 4 Supplemental Resources</span><br>
<span><i class="fa fa-check cooper-learn-head" aria-hidden="true"></i> Full lifetime access</span><br>
<span><i class="fa fa-check cooper-learn-head" aria-hidden="true"></i> Access on mobile and TV</span><br>
<span><i class="fa fa-check cooper-learn-head" aria-hidden="true"></i> 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 . 正如您在本网站中看到的，包含图像和信息的右侧滚动条，当滚动到底部时，它会附加到网页底部(页脚)。
最佳答案
只需添加以下 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
}
});
我不是很具体，但我希望我有所帮助。 :)
关于jquery - 修复页面中的容器并附加到滚动页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46989892/