# stick top ## Sticky to top ![](https://2277503657-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHpWM2qI66ASAuworLy%2F-MKi261hrSAqJO1xkfZt%2F-MKi3_mhoYdWVI0NlmNh%2Fimage.png?alt=media\&token=893379cd-043b-4343-b20d-4999b1b21701) ## Stick-top by bs4 class stick-top ## Stick-top by pure jquery ### HTML ```markup 4_3_1_Scroll_to_fix_js_simple
``` ### JS ```javascript ``` ## Hint: Stick-top modified ### HTML & CSS {% hint style="info" %} **Question:** 從上面的最簡範例改過來，我會把我的HTML Code會改成類似這個樣子。我要問的問題是，為何我要把`#tofix1`和`#tofix2`各自包在`
`中？\ \ **Answer:** 原因是，如果我用jquery把`
` fixed下來，那她的空間就會被釋放出來，此時，底下所有的\
都會往上跑，所以會有頁面的跳動。因此，我會把要被stick-top的`
`包在另外一個`
`中。這樣，我就可以用外部的\
來保留要被`fixed`的物件的空間，而避免後面的`
`因為前面的`
`被fixed而空間釋放之故往前彈。 {% endhint %} ```markup
```