Question

我希望在我的网站上有一个粘性导航栏，在用户滚动标题后应该粘贴在页面顶部。

这是主要代码：

.goToTop {
  position: fixed;
  top: 0;
  height: 70px;
  z-index: 1;
}


$(document).ready(function(){
  $(window).bind('scroll', function() {
    var navHeight = 100; // custom nav height
    ($(window).scrollTop() > navHeight) ? $('nav').addClass('goToTop') : $('nav').removeClass('goToTop');
  });
});

但它并没有真正发挥作用。

我的问题是如何修复用户滚动时出现“跳跃”行为的行为。（内容上升）？

Answer 1

滚动＆＃34;导航栏高度＆＃34;而不是粘贴导航栏，当滚动＆＃34;标题＆＃34;时执行此操作。高度（或标题高度加上其填充+边距）

Answer 2

见这里： http://jsfiddle.net/augburto/df8tb/1851/

您需要解决两个主要问题。

有一点是你的$(document).scroll(function() { var scrollableHeight = $(this).height() - $(window).height(); var opacity = 1 - ($(document).scrollTop() / scrollableHeight); $('header').css('opacity', opacity); });并不是导航的确切位置。您想要的是navHeight相对于视口顶部的位置。你可以这样做。

nav

我改变了命名惯例，因为它更准确地说是var navTop = $('#nav').offset().top;而不是高度。

内容跳转的另一个问题是，当您将导航设置为navTop时，它会将其从文档流中取出。解决这个问题的一种方法是计算position: fixed的实际高度，然后设置位置以便在导航粘贴时将其偏移那么多。

nav

Answer 3

你的造型应该是这样的。
viewList.add(mLinearLayoutOptions); mLinearLayoutItem.setTag(viewList.size() - 1); mLinearLayoutItem.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (viewList.get((int) v.getTag()).getVisibility() == View.GONE) { //expndIcon.setImageResource(R.drawable.up); expand(viewList.get((int) v.getTag())); } else { //expndIcon.setImageResource(R.drawable.down); collapse(viewList.get((int) v.getTag())); } } }); //code for expanding private void expand(View view) { //set Visible view.setVisibility(View.VISIBLE); mAnimator.start(); } private void collapse(View view) { int finalHeight = view.getHeight(); ValueAnimator mAnimator = slideAnimator(view, finalHeight, 0); mAnimator.addListener(new Animator.AnimatorListener() { @Override public void onAnimationEnd(Animator animator) { //Height=0, but it set visibility to GONE view.setVisibility(View.GONE); } @Override public void onAnimationStart(Animator animator) { } @Override public void onAnimationCancel(Animator animator) { } @Override public void onAnimationRepeat(Animator animator) { } }); mAnimator.start(); } private ValueAnimator slideAnimator(final View view, int start, int end) { ValueAnimator animator = ValueAnimator.ofInt(start, end); animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { //Update Height int value = (Integer) valueAnimator.getAnimatedValue(); ViewGroup.LayoutParams layoutParams = view.getLayoutParams(); layoutParams.height = value; view.setLayoutParams(layoutParams); } }); return animator; }
为什么我将z-index更改为2000是因为bootstrap为某些元素分配了1000,1020等的z-index。因此，如果您想要这一切，那么您的z-index应为2000。

你的剧本应该是这样的 .goToTop { position: fixed; top: 0; height: 70px; width:100%; z-index: 2000; }

Answer 4

因为您将nav更改为fixed，所以它不再发生冲突（布局，无论如何）。所以我们需要补偿额外的空间。我们可以通过填充内容的顶部来实现此目的。

.addSpace {
    padding-top : 60px;
}

现在我们所要做的就是更新你的JavaScript，把这个类放到你想要填充的东西上：

$(document).ready(function () {
    $(window).bind('scroll', function () {
        var navHeight = 100; // custom nav height
        if ($(window).scrollTop() > navHeight) {
            $('nav').addClass('goToTop');
            $('#content').addClass('addSpace');
        } else {
            $('nav').removeClass('goToTop');
            $('#content').removeClass('addSpace');
        }
    });
});

它works perfectly！（我在内容元素中添加了#content个ID，但您可以使用您能想到的任何选择器。）

粘性导航栏 - Bootstrap

4 个答案: