JQuery - 将div滑到部分结束

时间:2018-04-03 22:14:38

标签: javascript jquery

我正在寻求帮助。我是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&#8217;t want to lug around some giant piece of wood? We&#8217;ve managed to eliminate all the awkward from your life with the tiny Dinghy 24. It&#8217;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&#8217;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&#8217;ll understand better when it&#8217;s under your feet.</p>
<p>24&#8243; Length I 6.5&#8243; Width I 14&#8243; 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>

0 个答案:

没有答案