Question

处理网站的视差效果。我已经获得了使用背景图像正常运行的视差效果，但我决定稍微改变一下。而不是使用bg图像的效果，我正在寻找将效果应用于整个div，但我似乎无法使用整个div工作。希望将效果应用于.section div中的所有内容，同时保持#subpanel / scroll-pane独立可滚动。

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

您似乎将背景位置更改为位置。位置的允许值是绝对的，固定的，相对的，静态的和继承

你可能正在寻找这样的东西来移动一个完整的div

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

或

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

没有背景图像的视差div

1 个答案: