Javascript 固定菜单项

我有一个可滚动的下拉菜单，我想保持最后一个项目固定，始终在顶部可见，而所有其他项目将滚动。然而，用我的解决方案，它真的很紧张。以下是我目前掌握的情况：

HTML:

---

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

除了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;
}

---

希望它能达到你的目的。

你能发一把小提琴吗？我同意。一个JSFIDLE会容易得多！看起来不错，有什么问题吗？

 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');
          }

        }
    });

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

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;
}