我想用css和js做一个像google play store这样的侧边栏

Posted 2023-03-05

【中文标题】我想用css和js做一个像google play store这样的侧边栏

【英文标题】：I want to make a sidebar like google play store by css and js

【发布时间】：2016-10-04 08:02:57

【问题描述】：

我想做一个像 gool 这样的侧边栏 e play store..当我在正文中滚动左侧时，应该会出现侧边栏...

有没有办法制作这样的侧边栏？

【问题讨论】：

你知道如何制作一个吗？

至少有一个链接？

没有兄弟！怎么做？

【参考方案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，您只需右键单击浏览器并检查它。