jQuery在固定div上滑动切换(jQuery slide toggle on a fixed div)

jQuery在固定div上滑动切换(jQuery slide toggle on a fixed div)

我在我的网站上实现了幻灯片切换功能。 单击链接将使其下方的div向上滑动到视图中。

问题是因为链接是position:fixed它不会向上移动以位于面板上方。

我希望按钮向上滑动，使其始终显示在面板上方。

在这里查看实时预览 （篮子的底角链接）

第二个问题是单击链接也会将您弹回页面顶部。 我希望用户继续使用。

<script> $(document).ready(function(){ $(".basketButton").click(function(){ $(".basket").slideToggle("slow"); }); }); </script>

CSS和HTML

<!-- Basket overlay --> <div class="basketButton"> <a href="">Your Shopping Bag</a> </div> <div class="basket"> <h3>Your Shopping Bag</h3> </div> /* Basket */ .basketButton{ position:fixed; bottom:25px; right:25px; background-image:url('images/pinkbag.png'); padding-left:60px; display:inline-block; background-repeat: no-repeat; height: 67px; } .basketButton a{ font-weight:bold; font-size:18px; color: #67062F; padding-top:15px; display:inline-block; } .basket{ display:none; width:250px; height:200px; padding:10px; border-radius:5px; position:fixed; bottom:25px; right:25px; background-image:url('images/pink-bg.png'); } .basket h3{ color:#FFF; }

的jsfiddle

I've implemented a slide toggle function on my site. Click a link will cause the div below it to slide up into view.

The problem is that because the link is position:fixed it does not move up to sit above the panel.

I'd like the button to slide up so that it always appears above the panel.

See live preview here (bottom corner link for basket)

A second issue is that clicking the link also bounces you to the top of the page. I'd like the user to remain put.

<script> $(document).ready(function(){ $(".basketButton").click(function(){ $(".basket").slideToggle("slow"); }); }); </script>

CSS & HTML

<!-- Basket overlay --> <div class="basketButton"> <a href="">Your Shopping Bag</a> </div> <div class="basket"> <h3>Your Shopping Bag</h3> </div> /* Basket */ .basketButton{ position:fixed; bottom:25px; right:25px; background-image:url('images/pinkbag.png'); padding-left:60px; display:inline-block; background-repeat: no-repeat; height: 67px; } .basketButton a{ font-weight:bold; font-size:18px; color: #67062F; padding-top:15px; display:inline-block; } .basket{ display:none; width:250px; height:200px; padding:10px; border-radius:5px; position:fixed; bottom:25px; right:25px; background-image:url('images/pink-bg.png'); } .basket h3{ color:#FFF; }

JSFiddle

最满意答案

只需添加return false ：

<script> $(document).ready(function(){ $(".basketButton").click(function(){ $(".basket").slideToggle("slow"); return false; }); }); </script>

链接尝试导航到锚点＃，这是页面的顶部。 返回false将禁用链接的默认行为。

对于定位，只需使用一个固定的div与按钮和篮子里面： http ： //jsfiddle.net/w1ll3m/9fZsj/3/

Just add return false:

<script> $(document).ready(function(){ $(".basketButton").click(function(){ $(".basket").slideToggle("slow"); return false; }); }); </script>

The link tries to navigate to the anchor #, and that's the top of the page. Return false disables the default behavior of the link.

For the positioning just use one fixed div with the button and the basket inside: http://jsfiddle.net/w1ll3m/9fZsj/3/