Question

那边是Hy。我想在输入视口时在底部修复一个按钮。我尝试修复它。我想知道你对这个问题的主张是什么。我尝试了Sticky-Kit | jQuery plugin for sticky elements或Sticky Plugin，但修复元素始终位于顶部。

Answer 1

好的，基于你给我们的东西 - 这就是我认为你想要和可以做的。我从头开始，所以不要指望一个确切的实现。

首先，这是一个JsFiddle供您跟随：https://jsfiddle.net/rockmandew/y34fdrvg/1/

除了小提琴上的所有额外代码（用于样式和功能），你主要关注的是jQuery。

首先，您将为此设置变量，变量是navContainer和无序列表。您还需要设置一个变量，即“浏览器窗口滚动（以像素为单位）”，之后会显示“菜单”链接：

// browser window scroll (in pixels) after which the "menu" link is shown
var offset = 300;

var navigationContainer = $('#cd-nav'),
    mainNavigation = navigationContainer.find('#cd-main-nav ul');

//hide or show the "menu" link
checkMenu();
$(window).scroll(function(){
    checkMenu();
});

checkMenu函数是魔术发生的地方：

function checkMenu() {
    if( $(window).scrollTop() > offset && !navigationContainer.hasClass('is-fixed')) {
        navigationContainer.addClass('is-fixed').find('.cd-nav-trigger').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
            mainNavigation.addClass('has-transitions');
        });
    } else if ($(window).scrollTop() <= offset) {
        //check if the menu is open when scrolling up
        if( mainNavigation.hasClass('is-visible')  && !$('html').hasClass('no-csstransitions') ) {
            //close the menu with animation
            mainNavigation.addClass('is-hidden').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
                //wait for the menu to be closed and do the rest
                mainNavigation.removeClass('is-visible is-hidden has-transitions');
                navigationContainer.removeClass('is-fixed');
                $('.cd-nav-trigger').removeClass('menu-is-open');
            });
        //check if the menu is open when scrolling up - fallback if transitions are not supported
        } else if( mainNavigation.hasClass('is-visible')  && $('html').hasClass('no-csstransitions') ) {
                mainNavigation.removeClass('is-visible has-transitions');
                navigationContainer.removeClass('is-fixed');
                $('.cd-nav-trigger').removeClass('menu-is-open');
        //scrolling up with menu closed
        } else {
            navigationContainer.removeClass('is-fixed');
            mainNavigation.removeClass('has-transitions');
        }
    } 
}

我不会详细介绍这个功能，因为我认为它非常简单。您唯一需要注意的是在达到偏移时应用哪些样式，反之亦然。

我相信这是您正在寻找的解决方案类型。

Answer 2

我可以使用inview解决此问题。见here

$(function () {
  $('p.inviewOne').one('inview', function (event, visible) {
      if (visible) {
          $(this).text('Single bound found - I won\'t change again.').addClass('fixed');
      }
  });

  $('p.inview').bind('inview', function (event, visible) {
    if (visible) {
      $(this).text('Yay! You can see me!');
    } else {
      $(this).text('Hidden again. Muhahah!');
    }
  });
});

进入视口时，在底部修复按钮

2 个答案: