Как сделать плавающую боковую панель как envato?

Question

Мне очень нравится плавающая панель на левой стороне следующего сайта:

http://envato.com/

Я понятия не имею, как она называется, но мне нравится, когда вы нажимаете наКнопка поиска, она расширяется до страницы поиска, вы нажимаете на другую иконку, и она расширяется тем, что выглядит как ее собственная страница.

Как мне это сделать?Есть ли какое-нибудь руководство с использованием html5, JavaScript или jQuery?

ПРИМЕЧАНИЕ. Все ответы пока охватывают только плавающую панель, но не нажатие на ссылку на этой плавающей панели, чтобы показать окно, развернутое доправый.

Answer 1

<div id="float"></div>

#float{
    position:fixed;
    top:50px;
    left:0;
}

Проверьте рабочий пример на http://jsfiddle.net/TVwAv/

Answer 2

Я использую это для «плавающего (липкого) меню».Что я добавил это:1. Во избежание «прокрутки» моего «нижнего колонтитула» в случае, если боковое меню немного высоко, прокрутка выполняется только при необходимости, т. Е. Когда содержание выше боковой панели2. Я нашел анимационный эффект немного «нервным» на мой вкус, поэтому я просто изменил CSS через jquery.Конечно, вы устанавливаете 0 в анимации времени, но анимация все же происходит, поэтому использовать CSS быстрее и чище.3. 100 - высота моего заголовка.Вы можете предположить, что это «порог», когда нужно делать прокрутку.

 $(window).scroll(function(){
    if ($('#sidebar').height() < $('#content').height())
    {
    if ($(this).scrollTop() > 90)
        $('#sidebar').css({"margin-top": ($(this).scrollTop()) - 100 });
        //$('#sidebar').animate({"marginTop": ($(this).scrollTop()) - 100 }, 0);
    else
        $('#sidebar').css({"margin-top": ($(this).scrollTop()) });
        //$('#sidebar').animate({"marginTop": ($(this).scrollTop()) }, 0);
    }
 });`

Answer 3

сделано с использованием css,

HTML

<div id="floating_sidebar">
 whatever you want to put here
</div>

CSS

#floating_sidebar {
 position:fixed;
 left: 0;
 top: 100px; /* change to adjust height from the top of the page */
}

Answer 4

Я знаю, что это выглядит довольно большой кусок кода, однако эта функция просто работает, указав три простых варианта;ваш «верхний» элемент floater, ваш «target» (floater) и «reference» элемент для установки границ, он также автоматически заботится о верхнем и нижнем позициях, без css.

function scrollFloater(marginTop, reference, target, fixWhidth = false){

  var processScroll = function(){
    var from = reference.offset().top - marginTop;
    var to = reference.offset().top + reference.outerHeight() + marginTop - target.outerHeight();
    var scrollTop = $(this).scrollTop();
    var bottom = to - reference.offset().top + marginTop;

    if( fixWhidth )
      target.css('width', target.width());

    if( scrollTop > from && scrollTop < to )
      target.css('position', 'fixed').css('top',marginTop);
    else if( scrollTop >= to )
      target.css('position', 'absolute').css('top', bottom);
    else
      target.css('position', '').css('top',marginTop);

  }

  $(window).scroll(function(){ processScroll(); });
  processScroll();

}

И этокак бы вы его использовали:

$(function() {
    scrollFloater(41, $('.box.auth.register'), $('.plans-floater'), true);
});

Надеюсь, это кому-нибудь поможет.

Answer 5

вы можете использовать это ..

ваш html div здесь

<div id="scrolling_div">Your text here</div>

И у вас есть функция JavaScript здесь

$(window).scroll(function(){
    $('#scrolling_div').stop().animate({"marginTop": ($(this).scrollTop()) +10+ "px"}, "slow"});
    });

Вы также можете использовать cssдля этого

#scrolling_div {
 position:absolute;
 left: 0;
 top: 100px; 
}

Я не проверял его, но, надеюсь, он сработал.