0
我想修复包含信息并将其附加到页脚的侧滚动,同时如果网页内容更改仍保持连接状态。修复页面中的容器并在页面上附加到页脚
我得到这个问题我的权利滚动包含信息徘徊在我的页脚截图顶部附加下面。 [正如你所看到的信息卡与页脚重合,请你能告诉解决?] [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">
\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> 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。 正如您在本网站中看到的那样,当滚动到底部时,包含图像和信息的右侧滚动条会附加到网页底部(页脚)。
没有附加的截图可以修复吗? –