進入視口時在底部固定按鈕

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!'); 
    } 
    }); 
});