jQuery滑動切換固定div

我在我的網站上實現了滑動切換功能。點擊一個鏈接會導致它下面的div滑入視圖。jQuery滑動切換固定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

來源

2013-06-05 Francesca

哦，親愛的！現在就做，請在一分鐘內查看。 – Francesca

@Pete添加小提琴 – Francesca

不知道這是你之後：http://jsfiddle.net/peteng/9fZsj/1/ – Pete

只需添加return false：

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

的鏈接試圖導航到錨＃，這是頁面頂部。返回false會禁用鏈接的默認行爲。

對於定位只使用一個固定的div裏面的按鈕和籃： http://jsfiddle.net/w1ll3m/9fZsj/3/

來源

2013-06-05 16:20:16 Willem

這並不解決主要問題，雖然這是事實，固定div doesn沒有幻燈片。 – Francesca

這樣的事情：http://jsfiddle.net/w1ll3m/9fZsj/3/然後呢？ – Willem

jQuery滑動切換固定div

回答

相關問題