Question

我正在一个项目的网站上工作，即使用户向下滚动，我也需要将菜单栏固定在顶部。这是一个单页的网站。我似乎无法实现这一目标。另外，我的导航问题。我有以下jquery：

$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = this.hash;
    var $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
        window.location.hash = target;
    });
});

我的网站中有一些元素，您单击图像/按钮，新div会在其下方滑出。但是因为我把jquery（在上面这里）放进去，每次我点击一个按钮或图像时，jquery会把我扔到对象上，而不是像以前一样滑出它。这里的代码我不得不滑动：

$(function () {
    $('.showSingle').click(function () {
        var href = $(this).attr('href');
        console.log(href)
        var div = $(href).slideToggle('slow');
        $(".targetDiv").not(div).slideUp('slow')
        return false
    })
});

所以，我的问题是：如何以不影响我的其余代码的方式编写菜单代码？我想在jquery中排除我的html的某些部分。

如果可能的话，我想知道如何将我的菜单粘贴到我的页面顶部，我的标题图像直接从它下方开始，但是菜单应该滚动用户。

Answer 1

只需在要定位的按钮上添加一个类。就像下拉按钮上的<button class="dropdown">和滚轮按钮（或链接或其他）上的<button class="scroller">一样。

然后，使用jQuery，使用

仅定位下拉列表或滚动按钮

$("button.dropdown").click(function(){
    // do something
})

或

$("button.scroller").click(function(){
    // do something else
})

因此，解决方案不是将除某些元素之外的所有内容定位;它只针对您想要采取行动的要素。

对于粘性标头，只需在CSS中使用header{ position:fixed }即可。有很多关于它的教程，比如this one。

Answer 2

将元素的父级放在$('a[href^="#"]') $('li a[href^="#"]')中，以便点击没有冲突

如何从jquery中排除我的大多数html？

2 个答案: