Исправлен пункт меню

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

Я не проверял где-нибудь, кроме хрома, а вот чистый 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/

Надеется, что это делает то, что вы хотели.