Question

我想制作一个像gool一样的侧边栏 e play store ..当我在身体左侧滚动时，侧边栏应该出现......

有没有想过制作这样的侧边栏？

Answer 1

对于js。

$(function () {
  var msie6 = $.browser == 'msie' && $.browser.version < 7;
  if (!msie6 && $('#sidebar').offset()!=null) {
    var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('margin-top').replace(/auto/, 0));
    var height = $('#sidebar').height();
    var footerTop = $('#footer').offset().top - parseFloat($('#footer').css('margin-top').replace(/auto/, 0));
    var gap = 15;
    scrollingSideBar(top,height,footerTop,gap);
    $(window).resize(function (event) {
      scrollingSideBar(top,height,footerTop,gap);
    });
    $(window).scroll(function (event) {
      scrollingSideBar(top,height,footerTop,gap);
    });
  }
});

function scrollingSideBar(top,height,footerTop,gap){
  var winHeight = $(window).height();
  var winWidth = $(window).width();
  var y = $(this).scrollTop();
  var x = $(this).scrollLeft();
  if (height+top+gap < winHeight) {
    $('#sidebar').css({ position: "fixed",top: top, left:-x});
  } else if(y+winHeight > height+top+gap){
    $('#sidebar').css({position: "fixed",top: winHeight-height-gap, left:-x});
  } else if (y+winHeight > footerTop) {
    $('#sidebar').css({position: "fixed",top: footerTop-height-y-gap, left:-x});
  } else {
    $('#sidebar').css({position: "absolute",top: top, left:-x/winWidth});
  }
}

对于CSS，您只需右键单击浏览器并进行检查即可。

我想通过css和js制作像google play store这样的侧边栏

1 个答案: