Drop position:sticky use case

Author: birtles

Overview.bs

@@ -175,40 +175,9 @@ exactly would that work here?
 
 ## Scroll-triggered style changes ## {#scroll-triggered-style-changes-usecase}
 
-### The fixed navigation bar ### {#fixed-menu-bar-usecase}
-The content of displaying the menu bar is the commonplace web content.
-Usually, these menu bar is fixed always. But some content will want to fix menu bar when
-scrolling certain position.
-Here's the example content for scroll-triggered based changing styles.
-This example has a menu bar on the right of content, and this content has a large title content.
-This position of navigation bar will be fixed after exceeding the certain scroll position.
+Issue: Need a different use case here, the previous one could be done
+with ‘position: sticky’.
 
-Usually, we can implement using to the scroll event. However, If we use the @trigger rule, we can implement this more simply.
-
-<figure>
-<img src="img/usecase2.svg" width="600"
-alt="Use case 2: Scroll based styling">
- <figcaption>
-  Use case 2: Scroll based styling.<br>
-  The left figure is before scroll, menubar's position is not fixed.<br>
-  The right figure is after scroll, menubar's position is fixed.
- </figcaption>
-</figure>
-
-If we use animation-trigger style sheet, this example code will be as follow:
-<pre class='lang-css'>
-div#menu-bar {
-  position: relative;
-  top: 10px;
-}
-
-@trigger scroll(element(#scrollableContent), vertical, 200px) {
-  #menu-bar {
-    position: fixed;
-    top: 10px;
-  }
-}
-</pre>
 
 ## Scroll-linked animations ## {#scroll-linked-animations-usecase}
 

index.html

@@ -307,11 +307,7 @@ <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
         <li><a href="#navigation-bar-shrinking-effect"><span class="secno">2.1.1</span> <span class="content">Navigation bar shrinking effect</span></a>
         <li><a href="#navigation-highlight-effect"><span class="secno">2.1.2</span> <span class="content">Navigation highlight effect</span></a>
        </ol>
-      <li>
-       <a href="#scroll-triggered-style-changes-usecase"><span class="secno">2.2</span> <span class="content">Scroll-triggered style changes</span></a>
-       <ol class="toc">
-        <li><a href="#fixed-menu-bar-usecase"><span class="secno">2.2.1</span> <span class="content">The fixed navigation bar</span></a>
-       </ol>
+      <li><a href="#scroll-triggered-style-changes-usecase"><span class="secno">2.2</span> <span class="content">Scroll-triggered style changes</span></a>
       <li>
        <a href="#scroll-linked-animations-usecase"><span class="secno">2.3</span> <span class="content">Scroll-linked animations</span></a>
        <ol class="toc">
@@ -487,31 +483,8 @@ <h4 class="heading settled" data-level="2.1.2" id="navigation-highlight-effect">
 good. In the past we’ve talked about using snap points semantics but how
 exactly would that work here?</p>
    <h3 class="heading settled" data-level="2.2" id="scroll-triggered-style-changes-usecase"><span class="secno">2.2. </span><span class="content">Scroll-triggered style changes</span><a class="self-link" href="#scroll-triggered-style-changes-usecase"></a></h3>
-   <h4 class="heading settled" data-level="2.2.1" id="fixed-menu-bar-usecase"><span class="secno">2.2.1. </span><span class="content">The fixed navigation bar</span><a class="self-link" href="#fixed-menu-bar-usecase"></a></h4>
-    The content of displaying the menu bar is the commonplace web content.
-Usually, these menu bar is fixed always. But some content will want to fix menu bar when
-scrolling certain position.
-Here’s the example content for scroll-triggered based changing styles.
-This example has a menu bar on the right of content, and this content has a large title content.
-This position of navigation bar will be fixed after exceeding the certain scroll position. 
-   <p>Usually, we can implement using to the scroll event. However, If we use the @trigger rule, we can implement this more simply.</p>
-   <figure>
-     <img alt="Use case 2: Scroll based styling" src="img/usecase2.svg" width="600"> 
-    <figcaption> Use case 2: Scroll based styling.<br> The left figure is before scroll, menubar’s position is not fixed.<br> The right figure is after scroll, menubar’s position is fixed. </figcaption>
-   </figure>
-   <p>If we use animation-trigger style sheet, this example code will be as follow:</p>
-<pre class="lang-css highlight"><span class="nt">div#menu-bar </span><span class="p">{</span>
-  <span class="k">position</span><span class="p">:</span> relative<span class="p">;</span>
-  <span class="k">top</span><span class="p">:</span> <span class="m">10</span><span class="l">px</span><span class="p">;</span>
-<span class="p">}</span>
-
-<span class="n">@trigger</span> <span class="nf">scroll</span><span class="p">(</span><span class="nf">element</span><span class="p">(</span>#scrollableContent<span class="p">)</span><span class="p">,</span> vertical<span class="p">,</span> <span class="m">200</span><span class="l">px</span><span class="p">)</span> <span class="p">{</span>
-  <span class="nt">#menu-bar </span><span class="p">{</span>
-    <span class="k">position</span><span class="p">:</span> fixed<span class="p">;</span>
-    <span class="k">top</span><span class="p">:</span> <span class="m">10</span><span class="l">px</span><span class="p">;</span>
-  <span class="p">}</span>
-<span class="p">}</span>
-</pre>
+   <p class="issue" id="issue-11adae5f"><a class="self-link" href="#issue-11adae5f"></a> Need a different use case here, the previous one could be done
+with ‘position: sticky’.</p>
    <h3 class="heading settled" data-level="2.3" id="scroll-linked-animations-usecase"><span class="secno">2.3. </span><span class="content">Scroll-linked animations</span><a class="self-link" href="#scroll-linked-animations-usecase"></a></h3>
    <h4 class="heading settled" data-level="2.3.1" id="scrollable-animation-usecase"><span class="secno">2.3.1. </span><span class="content">Scrollable picture-story show</span><a class="self-link" href="#scrollable-animation-usecase"></a></h4>
     There are many animation contents which used the 3rd vendor plugins. These content can detect scroll event, and this content has interactive animation. 
@@ -1699,6 +1672,8 @@ <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content
    <div class="issue"> Specifying scroll offsets as percentages for this use case is not
 good. In the past we’ve talked about using snap points semantics but how
 exactly would that work here?<a href="#issue-b27fc5dc"> ↵ </a></div>
+   <div class="issue"> Need a different use case here, the previous one could be done
+with ‘position: sticky’.<a href="#issue-11adae5f"> ↵ </a></div>
    <div class="issue">
     <p>Should the physical directions ("horizontal" and "vertical") be removed, leaving
 only the logical directions ("block" and "inline")?</p>