沒有背景圖片的視差div

Question

正在處理網站的視差效果。 我已經使用背景圖像使視差效果正常工作，但是我決定稍微改變一下效果。 我不是想使用bg圖像來實現效果，而是希望將效果應用於整個div，但是我似乎無法在整個div上都可以正常使用。 希望將效果應用於.section div中的所有內容，同時保持#subpanel /滾動窗格可獨立滾動。

html-

<div class="col col-100">
<div class="col col-30">
<div class="section">    
<div id="subpanel" class="nav_dialog displayed" style="height: 660px; left: ; display: block;">
<div class="close_link">
    <a href="#">Close (x)</a>
</div>
<div class="scroll-pane" style="overflow: hidden; padding: 0px; width: 475px;">
<div class="jspContainer" style="width: 475px; height: 620px;">
    <div class="jspPane" style="padding: 0px 65px 0px 20px; top: 0px; width: 396px; font-size: 15px;">
        <img src="http://s2.postimg.org/5uxqi0mgl/cats1.jpg" alt="">
        <p>&nbsp;</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
    <div class="jspVerticalBar">
        <div class="jspCap jspCapTop"></div>
        <div class="jspTrack">
            <div class="jspDrag">
                <div class="jspDragTop"></div>
                <div class="jspDragBottom"></div>
            </div>
        </div>
        <div class="jspCap jspCapBottom"></div>
    </div>
</div>
</div>
</div>
</div>
</div>

JS-

<script>

$(function() {
    $.fn.parallax = function(options){
        var $$ = $(this);
        offset = $$.offset();
        var defaults = {
            "start": 0,
            "stop": offset.top + $$.height(),
            "coeff": 0.95
        };
        var opts = $.extend(defaults, options);
        return this.each(function(){
            $(window).bind('scroll', function() {
                windowTop = $(window).scrollTop();  
                if((windowTop >= opts.start) && (windowTop <= opts.stop)) {
                    newCoord = windowTop * opts.coeff;
                    //console.log($$)

                    $$.css({
                        "position": "0 "+ newCoord + "px"
                    });
                } 
            });
        });
    };    
    $('.section').parallax({ "coeff":-0.65 });
    $('.section .scroll-pane').parallax({ "coeff":2.55 });

})
</script>

<script>
$(function()
{
    $('.scroll-pane').jScrollPane();
});
</script>

希望這是有道理的。 任何幫助，將不勝感激。

Answer 1

看來您將background-position更改為position 。 位置的允許值為絕對，固定，相對，靜態和繼承

您可能正在尋找類似這樣的內容來移動整個div

$$.css({
    "top": newCoord + "px"
});

要么

$$.css({
    "margin-top": newCoord + "px"
});