Fix button внизу при вводе видового экрана

Question

Hy там. Я хотел бы установить кнопку внизу при входе в окно просмотра. Я пытаюсь исправить это. Мне интересно, каково ваше предложение по этой проблеме. Я пробовал Sticky-Kit | jQuery plugin for sticky elements или Sticky Plugin, но фиксирующий элемент всегда остается на вершине.

Answer 1

Хорошо, основываясь на том, что вы нам дали - это то, что я предполагаю, что вы хотите и могли бы сделать. Я начинаю с нуля, поэтому не ожидайте точной реализации.

Во-первых, здесь JsFiddle для вас следовать вместе с: https://jsfiddle.net/rockmandew/y34fdrvg/1/

Помимо всего дополнительного кода на Fiddle (для укладки и функциональности), вы в первую очередь касается 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!'); 
    } 
    }); 
});