html:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<div class="win_list_b"> <div class="scroll" style="height: 198px; overflow: hidden; position: relative;"> <ul class="win_list" style="position: absolute; top: -123px;"> <li>137 **** 4110</li> <li>151 **** 8520</li> <li>182 **** 6014</li> <li>186 **** 6390</li> <li>135 **** 1322</li> <li>185 **** 9479</li> <li>186 **** 0935</li> <li>136 **** 6673</li> <li>150 **** 2730</li> <li>153 **** 1527</li> <li>135 **** 0166</li> <li>155 **** 2161</li> <li>182 **** 2956</li> <li>152 **** 6096</li> <li>136 **** 7093</li> <li>131 **** 3328</li> <li>134 **** 1917</li> <li>156 **** 1963</li> <li>133 **** 3180</li> <li>185 **** 5689</li> </ul> </div> </div>
jQuery:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
$(function(){ var scroll = $(".scroll"), list = $(".win_list"); var height = $(".win_list_b").height(), listHeight = list.outerHeight(); scroll.css({"height":height,"overflow":"hidden","position":"relative"}); list.css({"position":"absolute","top":0}); var speed = 80; function marquee(){ var top = parseInt(list.css("top")); if(top <= height-listHeight){ list.css({"top":0}); }else{ list.css({"top":top-1}); } } setInterval(marquee,speed); var mainNav = $("#main-navbar"); $(window).scroll(function(){ if($(window).scrollTop()>40){ mainNav.css({"background":"#222","opacity":"0.7"}); }else{ mainNav.css({"background":"transparent","opacity":"1"}); } }); });