我正在寻求帮助。我是JQuery的新手,我为My Site编写了一个脚本:
jQuery(document).ready(function( $ ){
$(function() {
var $spcright = $(".single-product-content-right"),
$spcleft = $(".single-product-content-left"),
$spcbottom = $(".single-product-content-bottom"),
$window = $(window),
offset = $spcright.offset(),
height = $spcleft.height() - $spcright.height(),
topPadding = 45;
$window.scroll(function() {
if ($window.scrollTop() < height && $window.width() > 768) {
console.log(height);
$spcright.css('position', 'fixed').css('margin-top', '0');
$spcright.addClass('spc_right');
} else if($window.scrollTop() >= height && $window.width() > 768) {
$spcright.css('position', 'absolute').css('margin-top', height+'px');
$spcright.removeClass('spc_right');
} else if($window.width() < 768) {
$spcright.css('position', 'relative').css('margin-top', '0px');
$spcright.removeClass('spc_right');
} else {
$spcright.stop().animate({
marginTop: 0
});
}
});
});
});
目的是在滚动时使用图像向下滑动描述,直到带图像的div结束(停止的位置)。我似乎无法将高度钉住。
我尝试调用$(".single-product-content-left").height()
,但只检索了200px的值,而不是实际的容器高度(让我感到困惑)。我一直在尝试其他方式,但似乎没有用。
TL; DR:需要检索左div(.single-product-content-left
)的高度,但我很难这样做。请帮忙。
编辑:部分的HTML
<div class="single-product-content row">
<div class="single-product-content-left col-sm-6 col-xs-12">
<div class="gem-gallery gem-gallery-hover-default"> <div class="ly-gallery-item ly-gallery1" data-image-id="27245">
<div class="ly-gallery-item-image ly-gallery-item1">
<img class="27245 img1" src="http://lyboards.landyachtztesting.com/wp-content/uploads/2018/02/1.jpg" alt="" class="img-responsive">
</div>
</div>
<div class="ly-gallery-item ly-gallery2" data-image-id="27244">
<div class="ly-gallery-item-image ly-gallery-item2">
<img class="27244 img2" src="http://lyboards.landyachtztesting.com/wp-content/uploads/2018/02/4.jpg" alt="" class="img-responsive">
</div>
</div>
<div class="ly-gallery-item ly-gallery3" data-image-id="27243">
<div class="ly-gallery-item-image ly-gallery-item3">
<img class="27243 img3" src="http://lyboards.landyachtztesting.com/wp-content/uploads/2018/02/3.jpg" alt="" class="img-responsive">
</div>
</div>
<div class="ly-gallery-item ly-gallery4" data-image-id="27242">
<div class="ly-gallery-item-image ly-gallery-item4">
<img class="27242 img4" src="http://lyboards.landyachtztesting.com/wp-content/uploads/2018/02/2.jpg" alt="" class="img-responsive">
</div>
</div>
</div> </div>
<div class="single-product-content-right col-sm-6 col-xs-12">
<h2 class="product_title" style="color: #111111;">Test Board</h2><p class="price"><span class="woocs_price_code" data-product-id="26570"></span></p>
<div class="product-content entry-content"><p>Do you want to take a board everywhere you go but don’t want to lug around some giant piece of wood? We’ve managed to eliminate all the awkward from your life with the tiny Dinghy 24. It’s compact for quick moves through the streets, letting you dodge those human pylons as they drag their heels on their way to somewhere boring. But not you, you’re always headed somewhere epic with your Dinghy 24!</p>
<p>The quality and performance are unmatched, we could get into the details, but you’ll understand better when it’s under your feet.</p>
<p>24″ Length I 6.5″ Width I 14″ Wheelbase</p>
<p>100% Canadian Maple</p>
</div>
<form class="variations_form cart" method="post" enctype='multipart/form-data' data-product_id="26570" data-product_variations="[]">
<p class="stock out-of-stock">This product is currently out of stock and unavailable.</p>
</form>
</div>
</div>