没有背景图像的视差 div答案

【问题标题】：Parallax div without a background image没有背景图像的视差 div
【发布时间】：2014-01-24 17:48:51
【问题描述】：

为网站处理视差效果。我已经使用背景图像使视差效果正常工作，但我决定稍微改变一下。而不是使用 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>

希望这有点道理。任何帮助将不胜感激。

【问题讨论】：

这是一个很好的问题！这是我能找到的关于没有背景图像的视差的唯一问题。你的 JS 很棒，很有帮助

标签： javascript jquery html css parallax

【解决方案1】：

您似乎将 background-position 更改为 position。位置的允许值是绝对、固定、相对、静态和继承

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

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

或

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

【讨论】：