滚动时将Div滑开

时间:2014-08-24 11:40:05

标签: javascript jquery css slide

我想让我的标题内容(徽标)在滚动时向左滑动,留下固定菜单。我已经让内容消失,但幻灯片本身是从上到下,这使得它只是一个更长的滚动而不是幻灯片效果。

我想要完成的是像这个标题或类似标题:http://lifeinthegrid.com/simple-css-fixed-header/

正如你所看到的,一旦你滚动标题,就会向左移动一个非常漂亮的滑动并留下一个固定的菜单。

这是我到目前为止使用的代码:

<script>
$(window).scroll(function () { 
    if ($(this).scrollTop() > 80) {
        $("#header_content").hide(300);
    } else {
       $("#header_content").show(300);
    }
});
</script>

代码使div消失,但没有向左滑动。

2 个答案:

答案 0 :(得分:0)

你可以使用jquery ui。

$('#header_content').hide("slide", {direction: "right" }, 1000);

阅读文档以获取更多信息。

答案 1 :(得分:0)

尝试使用

$("#header_content").animate(function(){
    right: 9999;
}, 300});

要将css right属性设置为9999,并再次返回0.您需要在CSS中将position设置为静态以外的值才能使其生效。

<强>来源(S)

jQuery API - .animate()