Question

我坚持这个。谁有css拼图？

我需要显示滚动文本的元素在向下滚动页面时保持固定，但如果水平滚动则能够移动。

我做了一个jsfiddle来演示这个问题。您可以在此处找到它：http://jsfiddle.net/6tPpE/

HTML：

 <body>
        <section id="front_page">
                        <div id = "ticker_placer">
                            <div id="ticker_holder">
                                <div id="ticker_ribbon">
                                    <ul id ="ticker">
                                            <li>Scrolling on Jin &amp; Juice</li>
                                    </ul>
                                </div>
                            </div>
                        </div>  
        </section>
    </body>

CSS：

body {
    width: 700px;
    height: 700px;
    background:yellow;
}

#ticker_placer {
    position: absolute;
    left: 0px;
    width: 68%;
    min-width: 871px;
    z-index: 1;
}

#ticker_holder {
    position: fixed;
    width: 68%;
    min-width: 871px;
}

#ticker_ribbon {
    position:relative;
    padding: 0 10px;
    margin: 0 0 0 -10px;
    width: 400px;
    height: 35px;
    background: rgba(0,0,0,.25);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: 
    inset 0 1px rgba(255,255,255,.3),
    inset 0 10px rgba(255,255,255,.2), 
    inset 0 10px 20px rgba(255,255,255,.25),
    inset 0 -15px 30px rgba(0,0,0,.3),
    inset 0 -1px 6px rgba(0,0,0,.3);
}

#ticker_ribbon:before, #ticker_ribbon:after {
    content:" ";
    border-top:10px solid rgba(0,0,0,.6);
    position:absolute;
    bottom:-10px;
} 

#ticker_ribbon:before {
    border-left:10px solid transparent;
    left:0;
}

#ticker_ribbon:after {
    border-right:10px solid transparent;
    right:0;
}

.tickercontainer {
    position: absolute;
    left: 0;
    width: 400px;
}

.mask {
    overflow: hidden;
}

ul.newsticker { /* that's your list */
position: relative;
left: 1000px;
font: 10px;
font-family: "KeplerStd-Regular"; 
    src: url('Fonts/KeplerStd-Regular.ttf') format('truetype');
list-style-type: none;
color: white;
margin: 0;
padding: 0;
}

ul.newsticker li {
float: left; /* important: display inline gives incorrect results when you check for elem's width */
margin: 5px 0;
padding: 0;
}

section#front_page {
    position: relative;
    margin: 0 2.5%;
    width: 400px;
    height: 400px;
    background: green;
    box-shadow: 0 0 10px -2px #AAAAAA;
}

Answer 1

您需要使主体与固定元素的宽度相同：

body {
    width: 400px;
}

Answer 2

$(window).scroll(function(){
    $('#ticker_holder').css('left',-$(window).scrollLeft()+26);
});

这会在向左滚动时设置div的位置。

使用scrollLeft()我得到滚动量，这26px用于正确定位..所以设置左属性..

工作小提琴：http://jsfiddle.net/6tPpE/1/

垂直固定元素，水平滚动时移动

2 个答案: