Question

在滚动时，我正试图在页面顶部修复一个带有我姓名的p标签，但似乎没有任何对我有效。

<div id="page-content-wrapper">
      <p class="logo "><b>Mostafa</b> Masri</p> 

          <button type="button" class="hamburger is-closed" data-toggle="offcanvas">
              <span class="hamb-top"></span>
            <span class="hamb-middle"></span>
            <span class="hamb-bottom"></span>

          </button>


      </div> 
<style>.logo {/*position: sticky;*/ top: 60px; /*left: 77px;*/ font size: 21px; text-transform: uppercase opacity: .8; margin: 0; position:absolute; top: 0; right:0; padding:19px;} </style>

Answer 1

以下是使用position: fixed的可能解决方案。

.logo {
  position: fixed;
  top: 10px;
  right: 10px;
  font size: 21px;
  text-transform: uppercase;
  opacity: .8;
  margin: 0;
  padding: 19px;
}

<div id="page-content-wrapper">
  <p class="logo ">
    <b>Mostafa</b> Masri
  </p>
  <button type="button" class="hamburger is-closed" data-toggle="offcanvas">≡</button>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at augue quis nulla iaculis tempus. Nunc ornare tempor justo ac pretium. Fusce lobortis tortor nunc, egestas aliquet sem congue eget. Nullam sed porttitor tortor, at suscipit nunc. Sed eget
    diam sed lectus varius convallis. Sed interdum semper auctor. Nam vel nisi nisi. Etiam sem lacus, gravida sit amet odio sit amet, convallis pellentesque velit.</p>
  <p>Aliquam pulvinar eu magna nec rhoncus. Nulla vel felis nec nisi faucibus varius sit amet in velit. Integer posuere eleifend metus, ac placerat erat elementum eu. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum diam libero, rhoncus
    at pretium a, ultrices eu mauris. Pellentesque blandit pretium mi eget lacinia. Nullam erat est, congue ultrices viverra eget, iaculis sit amet velit. Ut tempus lacinia ante, non venenatis leo. Fusce quis ipsum maximus, mattis felis at, feugiat lacus.
    Morbi condimentum semper mi ac porttitor. Maecenas aliquam auctor mi, nec accumsan mauris congue a. Praesent rutrum porta sapien in scelerisque. Cras vehicula, tortor non hendrerit dictum, ex justo lacinia nulla, vitae dapibus nibh eros nec mauris.
    Nulla sodales hendrerit odio et efficitur.</p>
  <p>Fusce vel tempor elit, quis pharetra enim. Suspendisse potenti. Donec a arcu fermentum, venenatis tortor ac, mollis ante. Nullam vitae quam quis leo tempus iaculis id eget nibh. Maecenas consequat quis ante at lacinia. Donec auctor vel leo ut pretium.
    Vestibulum hendrerit, nunc non scelerisque condimentum, dolor urna convallis sem, pulvinar vestibulum elit ante eget quam. Nunc pretium, lectus vel tincidunt lacinia, massa neque posuere felis, non tristique ipsum ante vitae dui. Mauris vitae nulla
    quis mi congue eleifend non eu libero. Maecenas sit amet felis eu urna aliquam efficitur et congue nisi. Praesent sagittis nisi porttitor velit consequat, in feugiat quam ultrices. Cras sit amet enim ante. Fusce mi urna, volutpat semper justo ut,
    feugiat mattis elit. Sed quis volutpat justo. Fusce pretium venenatis massa a aliquam.</p>
  <p>Sed eu ultrices felis, et luctus metus. Donec justo felis, congue eget dui nec, commodo porttitor felis. Sed eu dui et risus condimentum rhoncus. Sed interdum libero ac risus convallis, sed placerat tortor interdum. Phasellus nec tristique eros, a ullamcorper
    ex. Aliquam nulla nunc, placerat et urna vitae, eleifend condimentum arcu. Nullam diam arcu, dignissim eu lacus ac, porta pulvinar arcu. Sed ultrices luctus leo, ac blandit mi pellentesque a. Nunc ornare, arcu consectetur bibendum hendrerit, nulla
    diam finibus est, non porta ligula erat vitae velit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sodales arcu a lacus luctus, non mollis neque placerat. Praesent lacinia nisl id lectus feugiat condimentum.
    Vivamus convallis aliquam est vel sagittis. Etiam ullamcorper consequat sapien, ornare porttitor massa luctus non. Ut purus tellus, maximus eu iaculis a, porta ac mi.</p>
  <p>Praesent suscipit risus vitae magna aliquet, sed egestas ipsum eleifend. Suspendisse tincidunt dolor at est rhoncus mollis. In convallis iaculis diam id finibus. Integer et mi blandit, imperdiet arcu in, accumsan velit. Pellentesque vitae tristique
    odio. Pellentesque facilisis dolor at suscipit ultrices. In hac habitasse platea dictumst. Sed molestie ante quis rutrum vestibulum. Phasellus interdum eros ut sem porta, non facilisis velit fringilla.</p>
</div>

滚动时在页面顶部修复<p>标记

1 个答案: