Question

我有一个可滚动的下拉菜单，我想保持最后一项固定，并始终在顶部显示，而所有其他项目将滚动。但是，根据我的解决方案，它真的很神奇。这就是我到目前为止所拥有的：

HTML：

<ul class="menu">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
  <li>Item 9</li>
  <li class="fixed">Item 10</li> <!-- this item will be fixed and always on top -->
</ul>

Javascript：

 this.$('.menu').on('scroll', function() {
      if (stickyItem = $('.fixed')) {

          //get the y position of the parent
          topHeight = stickyItem.parent().offset().top;
          //how far apart the sticky item should always be from the top of the bar
          heightDiff = stickyItem.parent().height() - stickyItem.height();
          if ((stickyItem.offset().top - topHeight) < heightDiff) {
            heightApply = heightDiff + ( heightDiff - (stickyItem.offset().top - stickyItem.parent().offset().top));
            stickyItem.css('top', (heightApply)+'px');
          }

        }
    });

CSS：

ul li.fixed {
    position: absolute;
    bottom: 0;
}

有没有更简单的方法来完成我想要做的事情？谢谢！

Answer 1

除了chrome之外，我还没有测试过任何地方，但这里有一个针对您的问题的纯CSS解决方案：

html,body{height:100%; margin:0; padding:0}

ul {margin: 0; padding:0; height:auto;
/*this padding bottom allows the penultimate element to be displayed*/
padding-bottom:39px}

ul li {padding:10px; background:#eee; color:#333; 
font-family:sans-serif; border-bottom:1px solid #CCC; }

ul li.fixed { /*you could also use the :last pseudo selector*/
    width:100%;
    position: fixed;
    bottom: 0;
    background:lightblue;
}

https://jsfiddle.net/patareco/kb99u78p/1/

希望它符合你的意图。

固定菜单项

1 个答案: