2023年5月22日 05:59:00go评论67阅读模式

英文:

Sticky topbar not "sticking" to the top

问题

I see that you're having an issue with the TOPBAR section not staying on top as expected. This could be due to several reasons, but without seeing the complete code and CSS, it's challenging to pinpoint the exact problem. However, here are a few general suggestions you can consider:

Check Z-Index: Make sure that the z-index property of your section#TOP_BAR_SECTION is set higher than other elements on the page. This ensures that it stays on top.
Position Property: You've set position: sticky; for section#TOP_BAR_SECTION, which is correct. Double-check if there are any conflicting CSS rules that might be affecting its behavior.
Parent Elements: Ensure that there are no parent elements with properties like overflow: hidden; that might be affecting the scrolling behavior of your sticky element.
Viewport Height: The height of the section#TOP_BAR_SECTION might be causing it to disappear if it's taller than the viewport height. Ensure it's not taller than the viewport.
JavaScript Interference: Check if any JavaScript code is manipulating the CSS properties of section#TOP_BAR_SECTION in a way that interferes with its stickiness.
Browser Compatibility: Different browsers may interpret sticky positioning differently. Check if the issue persists across different browsers.
Console Errors: Inspect the browser console for any JavaScript errors or CSS warnings that might be related to this issue.

If you've checked all of these and still can't find the issue, you may need to provide more code and CSS details for a more specific diagnosis.

英文:

So this is my code... it's my first time trying to create a code for a website, so I'm sorry if the code is a little bit of a mess, but I'm only worried about the section "section#TOP_BAR_SECTION" as it was supposed to stick to the top of the page but it does not

const SIDE_MENU_SECTION = window.document.getElementById(&quot;SIDE_MENU_SECTION&quot;);
  const SIDE_MENU_DIV1 = window.document.getElementById(&quot;Side_Menu_Div1&quot;);
  
  const MAIN_CONTENT_SECTION = window.document.getElementById(&quot;MAIN_CONTENT_SECTION&quot;);
  const TOP_BAR_SECTION = window.document.getElementById(&quot;TOP_BAR_SECTION&quot;);
  const TOP_BAR_DIV1 = window.document.getElementById(&quot;Top_Bar_Div1&quot;);
  const CONTENT_SECTION = window.document.getElementById(&quot;CONTENT_SECTION&quot;);
  const CONTENT_DIV1 = window.document.getElementById(&quot;Content_Div1&quot;);

  var Client_width;
  var Client_height;
  
  var Side_menu_section_width;
  var Max_width_for_side_menu;
  
  var Loaded = false;

  UpdateVariables1();
  ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
  
  /* Quando a pagina terminar o Load, muda o estado da vari&#225;vel Loaded, para garantir que a p&#225;gina est&#225; carregada*/
  window.onload = PageLoaded;

  function PageLoaded(){
    Loaded = true;
  }

  function MainTransitions(New_Time = &quot;0.75s&quot;){
  	SIDE_MENU_SECTION.style.transitionDuration = New_Time;
    SIDE_MENU_DIV1.style.transitionDuration = New_Time;
    
    MAIN_CONTENT_SECTION.style.transitionDuration = New_Time;
    TOP_BAR_SECTION.style.transitionDuration = New_Time;
    TOP_BAR_DIV1.style.transitionDuration = New_Time;
    CONTENT_SECTION.style.transitionDuration = New_Time;
    CONTENT_DIV1.style.transitionDuration = New_Time;
  }
  
  function UpdateVariables1(){
  	Client_width = document.documentElement.clientWidth;
    Client_height = document.documentElement.clientHeight;
    
    Side_menu_section_width = SIDE_MENU_SECTION.offsetWidth;
    Max_width_for_side_menu = Math.max(540,Client_width/3.0);
  }
  
  function SideMenuResize(New_Width = 0){
    SIDE_MENU_SECTION.style.width = New_Width + &quot;px&quot;;
    SIDE_MENU_DIV1.style.width = New_Width + &quot;px&quot;;

    MAIN_CONTENT_SECTION.style.marginLeft = New_Width + &quot;px&quot;;
  }
  
  function ContentResize(Page_Width = 0,Front_Page_Height = 0){
    TOP_BAR_DIV1.style.width = Page_Width + &quot;px&quot;;
    
    CONTENT_DIV1.style.width = Page_Width + &quot;px&quot;;
  }
  
  function ResizeAllContent(Side_Menu_New_Size = 0,Main_New_Width = 0,Main_New_Height = 0){
    SideMenuResize(Side_Menu_New_Size);
    
    ContentResize(Main_New_Width,Main_New_Height);
  }

  window.addEventListener(&quot;resize&quot;,debounce(function(e){  
    UpdateVariables1();
    if (Side_menu_section_width === undefined || Side_menu_section_width === null) {
      
    }else {
      if (Loaded) {       
      	if (Side_menu_section_width === 0) {
          MainTransitions(&quot;0s&quot;);
      
          UpdateVariables1();
          
          ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
    
          UpdateVariables1();

          ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
        }else {
          MainTransitions(&quot;0s&quot;);
      
          UpdateVariables1();

          ResizeAllContent(Max_width_for_side_menu,(Client_width - Max_width_for_side_menu),(Client_height - TOP_BAR_SECTION.offsetHeight));

          UpdateVariables1();

          ResizeAllContent(Max_width_for_side_menu,(Client_width - Max_width_for_side_menu),(Client_height - TOP_BAR_SECTION.offsetHeight));
        }
      }else {
   
      }
    }
  }));

  function debounce(func){
    var timer;
    return function(event){
      if(timer) clearTimeout(timer);
      timer = setTimeout(func,100,event);
    };
  }

  function OpenSideMenu() {
    MainTransitions(&quot;0.75s&quot;);
    
    UpdateVariables1();
    
    ResizeAllContent(Max_width_for_side_menu,(Client_width - Max_width_for_side_menu),(Client_height - TOP_BAR_SECTION.offsetHeight));
  }

  function CloseSideMenu() {
    MainTransitions(&quot;0.75s&quot;);
    
    UpdateVariables1();
    
    ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
  }

/* Efeitos de neon para a Top_Bar_Logo1*/
  const Top_Bar_Logo1_Target = window.document.getElementById(&quot;Top_Bar_Div1_Logo1&quot;);

  const Top_Bar_Logo1_FlickerLetter = letter =&gt; `&lt;span style=&quot;animation: text-flicker-in-glow ${Math.random()*4}s linear both &quot;&gt;${letter}&lt;/span&gt;`
  const Top_Bar_Logo1_ColorLetter = letter =&gt; `&lt;span style=&quot;color: hsla(${Math.random()*600}, 100%, 80%, 1);&quot;&gt;${letter}&lt;/span&gt;`;
  const Top_Bar_Logo1_FlickerAndColorText = text =&gt; 
    text
      .split(&#39;&#39;)
      .map(Top_Bar_Logo1_FlickerLetter)
      .map(Top_Bar_Logo1_ColorLetter)
      .join(&#39;&#39;);
  const Top_Bar_Logo1_NeonGlory = Top_Bar_Logo1_Target =&gt; Top_Bar_Logo1_Target.innerHTML = Top_Bar_Logo1_FlickerAndColorText(Top_Bar_Logo1_Target.textContent);
  Top_Bar_Logo1_NeonGlory(Top_Bar_Logo1_Target);

  const Top_Bar_Logo1_Letters = Top_Bar_Logo1_Target.querySelectorAll(&#39;span&#39;);
  for (let i = 0; i &lt; Top_Bar_Logo1_Letters.length; i++) {
    Top_Bar_Logo1_Letters[i].addEventListener(&#39;click&#39;, () =&gt; Top_Bar_Logo1_NeonGlory(Top_Bar_Logo1_Letters[i]));
  }


/* Efeitos de neon para a Front_Page_Logo1*/
  const Front_Page_Logo1_Target = window.document.getElementById(&quot;Content_Div1_Div1_Logo1&quot;);

  const Front_Page_Logo1_FlickerLetter = letter =&gt; `&lt;span style=&quot;animation: text-flicker-in-glow ${Math.random()*4}s linear both &quot;&gt;${letter}&lt;/span&gt;`
  const Front_Page_Logo1_ColorLetter = letter =&gt; `&lt;span style=&quot;color: hsla(${Math.random()*600}, 100%, 80%, 1);&quot;&gt;${letter}&lt;/span&gt;`;
  const Front_Page_Logo1_FlickerAndColorText = text =&gt; 
    text
      .split(&#39;&#39;)
      .map(Front_Page_Logo1_FlickerLetter)
      .map(Front_Page_Logo1_ColorLetter)
      .join(&#39;&#39;);
  const Front_Page_Logo1_NeonGlory = Front_Page_Logo1_Target =&gt; Front_Page_Logo1_Target.innerHTML = Front_Page_Logo1_FlickerAndColorText(Front_Page_Logo1_Target.textContent);
  Front_Page_Logo1_NeonGlory(Front_Page_Logo1_Target);

  const Front_Page_Logo1_Letters = Front_Page_Logo1_Target.querySelectorAll(&#39;span&#39;);
  for (let i = 0; i &lt; Front_Page_Logo1_Letters.length; i++) {
    Front_Page_Logo1_Letters[i].addEventListener(&#39;click&#39;, () =&gt; Front_Page_Logo1_NeonGlory(Front_Page_Logo1_Letters[i]));
  }

@import url(&#39;https://fonts.googleapis.com/css?family=Monoton&#39;);
html, body {
margin: 0px;
border: 0px;
padding: 0px;
width: fit-content;
height: fit-content;
overflow-x: hidden;
overflow-y: auto;
background-color: #191919;
background-image: url(&#39;img_tree.gif&#39;);
background-image: url(&#39;imagens/pagina_inicial/congresso_nacional_escurecido_70.png&#39;);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
section#WHOLE_PAGE{
margin: 0px;
border: 0px;
padding: 0px;
top: 0px;
left: 0px;
width: fit-content;
height: fit-content;
overflow: auto;
}
section#SIDE_MENU_SECTION {
margin: 0px;
border: 0px;
padding: 0px;
padding-top: 10vw; 
height: 100%;
width: 0px;
position: fixed; 
z-index: 1; 
top: 0px; 
left: 0px;
display: block;
background-color: lightgray; 
overflow-x: hidden; 
transition: 0.75s; 
.side_menu_div1{
height: 100%;
width: 0px;
transition: 0.75s;
}
.side_menu_close_btn{
margin: 0px;
border: 0px;
padding: 0px;
font-size: max(50px,10vw);
text-decoration: none;
color: white;
position: absolute;
top: 0px;
right: 1vw;
}
.side_menu_text {
margin: 0px;
border: 0px;
padding: 0px;
display: block;
font-size: max(25px,2.5vw);
text-decoration: none;
color: white;
transition: 0.5s;
}
.side_menu_text:hover {
border: 0.5vw dashed white;
cursor: pointer;
font-size: 3vw;
font-weight: bold;
text-decoration: none;
color: black;
}
}
section#MAIN_CONTENT_SECTION {
margin: 0px;
margin-left: 0px;
border: 0px;
padding: 0px;
width: fit-content;
height: fit-content;
overflow-x: hidden;
overflow-y: auto;
transition: margin-left .75s;
transition-delay: 0s;
list-style-type: none;   
}
section#TOP_BAR_SECTION {
background-color: black;
color: black;
height: fit-content;
width: fit-content;
transition: width 0.75s;
overflow: hidden;
position: sticky;
top: 0%;
left: 0%;
z-index: 10;
.top_bar_div1{
margin: 0px;
border: 0px;
padding: 0px;
height: max(50px,10vh);
position: relative;
top: 0px;
left: 0px;
}
.top_bar_div1_logo1{
margin: 0px;
border: 0px;
padding: 0px;
font-family: &#39;Monoton&#39;, cursive;
font-size: max(15px,3vh);
font-weight: 400;
text-align: center;
width: fit-content;
position: absolute;
justify-content: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.top_bar_div1_logo1:hover{
cursor: pointer;  
}
.top_bar_div1_menu1{
margin: 0px;
border-left: 0px;
border-right: 0px;
border-top: max(75px,10vh);
border-bottom: max(75px,10vh);
border-color: #FBFFA0;
border-style:solid;
padding: 0px;
background-color: #FBFFA0;
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: max(22.5px,3vh);
font-weight: 400;
text-align: center;
width: fit-content;
position: absolute;
justify-content: center;
top: 50%;
left: 0%;
z-index: 10;
transform: translate(0%, -50%);
}
.top_bar_div1_menu1:hover{
background-color: #F4FF00;
border-color: #F4FF00;
cursor: pointer; 
color: black;
font-weight: bold;
}
}
section#CONTENT_SECTION {
background-color: transparent;
height: fit-content;
width: fit-content;
transition: width 0.75s;
.content_div1{
width: fit-content;
position: relative;
justify-content: center;
top: 0px;
left: 0px;
}
.content_div1_div1{
margin: 0px;
border: 0px;
padding: 0px;
padding-top: 5vh;
padding-bottom: 2.5vw;
display: inline-block;
width: fit-content;
position: relative;
justify-content: center;
top: 0px;
left: 0px;
justify-content: center;
left: 50%;
transform: translate(-50%, 0);
}
.content_div1_div1_text1{
margin: 0px;
border: 0px;
padding: 0px;
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: max(50px, 7vw); 
-webkit-text-stroke-width: max(1px, 0.14vw);
-webkit-text-stroke-color: black;
text-align: center;
justify-content: center;
}
.content_div1_div1_logo1{
margin: 0px;
border: 0px;
padding: 0px;
font-family: &#39;Monoton&#39;, cursive;
font-size: max(50px, 7.5vw);
font-weight: 400;
text-align: center;
justify-content: center;
}
.content_div1_div2_p{
margin: 0px;
border: 0px;
padding: 10%;
padding-top: 2.5vw;
padding-bottom: 2.5vw;
text-indent: 3vw;
text-align: justify;
font-size: max(21.42px,3vw);
-webkit-text-stroke-width: max(0.42px, 0.06vw);
-webkit-text-stroke-color: black;
}
}
/* Efeito de Neon na logo do POLITICAGEM */
@-webkit-keyframes text-flicker-in-glow{0%{opacity:0}10%{opacity:0;text-shadow:none}10.1%{opacity:1;text-shadow:none}10.2%{opacity:0;text-shadow:none}20%{opacity:0;text-shadow:none}20.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.25)}20.6%{opacity:0;text-shadow:none}30%{opacity:0;text-shadow:none}30.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.5%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.6%{opacity:0;text-shadow:none}45%{opacity:0;text-shadow:none}45.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}50%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55.1%{opacity:0;text-shadow:none}57%{opacity:0;text-shadow:none}57.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60.1%{opacity:0;text-shadow:none}65%{opacity:0;text-shadow:none}65.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75.1%{opacity:0;text-shadow:none}77%{opacity:0;text-shadow:none}77.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85.1%{opacity:0;text-shadow:none}86%{opacity:0;text-shadow:none}86.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}100%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}}@keyframes text-flicker-in-glow{0%{opacity:0}10%{opacity:0;text-shadow:none}10.1%{opacity:1;text-shadow:none}10.2%{opacity:0;text-shadow:none}20%{opacity:0;text-shadow:none}20.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.25)}20.6%{opacity:0;text-shadow:none}30%{opacity:0;text-shadow:none}30.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.5%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.6%{opacity:0;text-shadow:none}45%{opacity:0;text-shadow:none}45.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}50%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55.1%{opacity:0;text-shadow:none}57%{opacity:0;text-shadow:none}57.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60.1%{opacity:0;text-shadow:none}65%{opacity:0;text-shadow:none}65.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75.1%{opacity:0;text-shadow:none}77%{opacity:0;text-shadow:none}77.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85.1%{opacity:0;text-shadow:none}86%{opacity:0;text-shadow:none}86.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}100%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}}

  &lt;section id=&quot;WHOLE_PAGE&quot;&gt;
&lt;section id=&quot;SIDE_MENU_SECTION&quot;&gt;
&lt;div id=&quot;Side_Menu_Div1&quot; class=&quot;side_menu_div1&quot;&gt;
&lt;a id=&quot;Side_Menu_Close_Btn&quot; class=&quot;side_menu_close_btn&quot; href=&quot;javascript:void(0)&quot; onclick=&quot;CloseSideMenu()&quot;&gt;&amp;times;&lt;/a&gt;
&lt;a id=&quot;Side_Menu_Option1&quot; class=&quot;side_menu_text&quot; href=&quot;#&quot; onclick=&quot;location.href = &#39;sobre.html&#39;;&quot;&gt;Option1&lt;/a&gt;
&lt;a id=&quot;Side_Menu_Option2&quot; class=&quot;side_menu_text&quot; href=&quot;#&quot;&gt;Option2&lt;/a&gt;
&lt;a id=&quot;Side_Menu_Option3&quot; class=&quot;side_menu_text&quot; href=&quot;#&quot;&gt;Option3&lt;/a&gt;
&lt;a id=&quot;Side_Menu_Option4&quot; class=&quot;side_menu_text&quot; href=&quot;#&quot;&gt;Option4&lt;/a&gt;
&lt;a id=&quot;Side_Menu_Option5&quot; class=&quot;side_menu_text&quot; href=&quot;#&quot;&gt;Option5&lt;/a&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section id=&quot;MAIN_CONTENT_SECTION&quot;&gt;
&lt;section id=&quot;TOP_BAR_SECTION&quot;&gt;
&lt;div id=&quot;Top_Bar_Div1&quot; class=&quot;top_bar_div1&quot;&gt;
&lt;h1 id=&quot;Top_Bar_Div1_Menu1&quot; class=&quot;top_bar_div1_menu1&quot; onclick=&quot;OpenSideMenu();&quot; href=&quot;#&quot;&gt;&amp;#9776 Menu&lt;/h1&gt;
&lt;h1 id=&quot;Top_Bar_Div1_Logo1&quot; class=&quot;top_bar_div1_logo1&quot; onclick=&quot;;&quot;&gt;TEXT&lt;/h1&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section id=&quot;CONTENT_SECTION&quot;&gt;
&lt;div id=&quot;Content_Div1&quot; class=&quot;content_div1&quot;&gt;
&lt;div id=&quot;Content_Div1_Div1&quot; class=&quot;content_div1_div1&quot;&gt;
&lt;h1 id=&quot;Content_Div1_Div1_Text1&quot; class=&quot;content_div1_div1_text1&quot;&gt;Text&lt;/h1&gt;
&lt;h1 id=&quot;Content_Div1_Div1_Logo1&quot; class=&quot;content_div1_div1_logo1&quot;&gt;Text&lt;/h1&gt;
&lt;/div&gt;
&lt;div id=&quot;Content_Div1_Div2&quot; class=&quot;content_div1_div2&quot;&gt;
&lt;p id=&quot;Content_Div1_Div2_P1&quot; class=&quot;content_div1_div2_p&quot;&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;/p&gt;
&lt;p id=&quot;Content_Div1_Div2_P2&quot; class=&quot;content_div1_div2_p&quot;&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;/section&gt;
&lt;/section&gt;

I'm not sure what I did wrong but the TOPBAR "section#TOP_BAR_SECTION" was supposed to stay on top because its position is sticky, but it does not keep itself on top of the page.

答案1

得分: 1

你的section#SIDE_MENU_SECTION和section#CONTENT_SECTION选择器缺少闭合大括号}。

在你的.side_menu_text:hover和.content_div1_div2_p选择器后面有多余的闭合大括号}。

看起来你尝试嵌套CSS选择器，这在普通CSS中是无效的。我通过验证工具运行了你的CSS以找到这个错误。将来你可以使用这个工具验证你自己的CSS：https://jigsaw.w3.org/css-validator/#validate_by_input

英文:

You are missing a closing brace } for your section#SIDE_MENU_SECTION and section#CONTENT_SECTION selectors

You also have extra closing braces after your .side_menu_text:hover and .content_div1_div2_p selectors.

It looks like you are trying to nest CSS selectors, which is NOT valid in plain CSS. I ran your CSS through the validation tool to find that error. You can validate your own CSS using this tool in the future: https://jigsaw.w3.org/css-validator/#validate_by_input

Now that the code is valid, it's much easier to find issues. The issue with your sticky header is that a bunch of its parent element had overflow:hidden or position:fixed on them. You can't do this because the sticky element needs to be able to get the scroll position correctly and those types of properties will prevent that. See the demo below, I added a /*THIS WAS COMMENTED OUT*/ comment above everything I commented out. This also has your fixed braces I mentioned above.

const SIDE_MENU_SECTION = window.document.getElementById(&quot;SIDE_MENU_SECTION&quot;);
  const SIDE_MENU_DIV1 = window.document.getElementById(&quot;Side_Menu_Div1&quot;);
  
  const MAIN_CONTENT_SECTION = window.document.getElementById(&quot;MAIN_CONTENT_SECTION&quot;);
  const TOP_BAR_SECTION = window.document.getElementById(&quot;TOP_BAR_SECTION&quot;);
  const TOP_BAR_DIV1 = window.document.getElementById(&quot;Top_Bar_Div1&quot;);
  const CONTENT_SECTION = window.document.getElementById(&quot;CONTENT_SECTION&quot;);
  const CONTENT_DIV1 = window.document.getElementById(&quot;Content_Div1&quot;);

  var Client_width;
  var Client_height;
  
  var Side_menu_section_width;
  var Max_width_for_side_menu;
  
  var Loaded = false;

  UpdateVariables1();
  ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
  
  /* Quando a pagina terminar o Load, muda o estado da vari&#225;vel Loaded, para garantir que a p&#225;gina est&#225; carregada*/
  window.onload = PageLoaded;

  function PageLoaded(){
    Loaded = true;
  }

  function MainTransitions(New_Time = &quot;0.75s&quot;){
  	SIDE_MENU_SECTION.style.transitionDuration = New_Time;
    SIDE_MENU_DIV1.style.transitionDuration = New_Time;
    
    MAIN_CONTENT_SECTION.style.transitionDuration = New_Time;
    TOP_BAR_SECTION.style.transitionDuration = New_Time;
    TOP_BAR_DIV1.style.transitionDuration = New_Time;
    CONTENT_SECTION.style.transitionDuration = New_Time;
    CONTENT_DIV1.style.transitionDuration = New_Time;
  }
  
  function UpdateVariables1(){
  	Client_width = document.documentElement.clientWidth;
    Client_height = document.documentElement.clientHeight;
    
    Side_menu_section_width = SIDE_MENU_SECTION.offsetWidth;
    Max_width_for_side_menu = Math.max(540,Client_width/3.0);
  }
  
  function SideMenuResize(New_Width = 0){
    SIDE_MENU_SECTION.style.width = New_Width + &quot;px&quot;;
    SIDE_MENU_DIV1.style.width = New_Width + &quot;px&quot;;

    MAIN_CONTENT_SECTION.style.marginLeft = New_Width + &quot;px&quot;;
  }
  
  function ContentResize(Page_Width = 0,Front_Page_Height = 0){
    TOP_BAR_DIV1.style.width = Page_Width + &quot;px&quot;;
    
    CONTENT_DIV1.style.width = Page_Width + &quot;px&quot;;
  }
  
  function ResizeAllContent(Side_Menu_New_Size = 0,Main_New_Width = 0,Main_New_Height = 0){
    SideMenuResize(Side_Menu_New_Size);
    
    ContentResize(Main_New_Width,Main_New_Height);
  }

  window.addEventListener(&quot;resize&quot;,debounce(function(e){  
    UpdateVariables1();
    if (Side_menu_section_width === undefined || Side_menu_section_width === null) {
      
    }else {
      if (Loaded) {       
      	if (Side_menu_section_width === 0) {
          MainTransitions(&quot;0s&quot;);
      
          UpdateVariables1();
          
          ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
    
          UpdateVariables1();

          ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
        }else {
          MainTransitions(&quot;0s&quot;);
      
          UpdateVariables1();

          ResizeAllContent(Max_width_for_side_menu,(Client_width - Max_width_for_side_menu),(Client_height - TOP_BAR_SECTION.offsetHeight));

          UpdateVariables1();

          ResizeAllContent(Max_width_for_side_menu,(Client_width - Max_width_for_side_menu),(Client_height - TOP_BAR_SECTION.offsetHeight));
        }
      }else {
   
      }
    }
  }));

  function debounce(func){
    var timer;
    return function(event){
      if(timer) clearTimeout(timer);
      timer = setTimeout(func,100,event);
    };
  }

  function OpenSideMenu() {
    MainTransitions(&quot;0.75s&quot;);
    
    UpdateVariables1();
    
    ResizeAllContent(Max_width_for_side_menu,(Client_width - Max_width_for_side_menu),(Client_height - TOP_BAR_SECTION.offsetHeight));
  }

  function CloseSideMenu() {
    MainTransitions(&quot;0.75s&quot;);
    
    UpdateVariables1();
    
    ResizeAllContent(0,(Client_width - 0),(Client_height - TOP_BAR_SECTION.offsetHeight));
  }

/* Efeitos de neon para a Top_Bar_Logo1*/
  const Top_Bar_Logo1_Target = window.document.getElementById(&quot;Top_Bar_Div1_Logo1&quot;);

  const Top_Bar_Logo1_FlickerLetter = letter =&gt; `&lt;span style=&quot;animation: text-flicker-in-glow ${Math.random()*4}s linear both &quot;&gt;${letter}&lt;/span&gt;`
  const Top_Bar_Logo1_ColorLetter = letter =&gt; `&lt;span style=&quot;color: hsla(${Math.random()*600}, 100%, 80%, 1);&quot;&gt;${letter}&lt;/span&gt;`;
  const Top_Bar_Logo1_FlickerAndColorText = text =&gt; 
    text
      .split(&#39;&#39;)
      .map(Top_Bar_Logo1_FlickerLetter)
      .map(Top_Bar_Logo1_ColorLetter)
      .join(&#39;&#39;);
  const Top_Bar_Logo1_NeonGlory = Top_Bar_Logo1_Target =&gt; Top_Bar_Logo1_Target.innerHTML = Top_Bar_Logo1_FlickerAndColorText(Top_Bar_Logo1_Target.textContent);
  Top_Bar_Logo1_NeonGlory(Top_Bar_Logo1_Target);

  const Top_Bar_Logo1_Letters = Top_Bar_Logo1_Target.querySelectorAll(&#39;span&#39;);
  for (let i = 0; i &lt; Top_Bar_Logo1_Letters.length; i++) {
    Top_Bar_Logo1_Letters[i].addEventListener(&#39;click&#39;, () =&gt; Top_Bar_Logo1_NeonGlory(Top_Bar_Logo1_Letters[i]));
  }


/* Efeitos de neon para a Front_Page_Logo1*/
  const Front_Page_Logo1_Target = window.document.getElementById(&quot;Content_Div1_Div1_Logo1&quot;);

  const Front_Page_Logo1_FlickerLetter = letter =&gt; `&lt;span style=&quot;animation: text-flicker-in-glow ${Math.random()*4}s linear both &quot;&gt;${letter}&lt;/span&gt;`
  const Front_Page_Logo1_ColorLetter = letter =&gt; `&lt;span style=&quot;color: hsla(${Math.random()*600}, 100%, 80%, 1);&quot;&gt;${letter}&lt;/span&gt;`;
  const Front_Page_Logo1_FlickerAndColorText = text =&gt; 
    text
      .split(&#39;&#39;)
      .map(Front_Page_Logo1_FlickerLetter)
      .map(Front_Page_Logo1_ColorLetter)
      .join(&#39;&#39;);
  const Front_Page_Logo1_NeonGlory = Front_Page_Logo1_Target =&gt; Front_Page_Logo1_Target.innerHTML = Front_Page_Logo1_FlickerAndColorText(Front_Page_Logo1_Target.textContent);
  Front_Page_Logo1_NeonGlory(Front_Page_Logo1_Target);

  const Front_Page_Logo1_Letters = Front_Page_Logo1_Target.querySelectorAll(&#39;span&#39;);
  for (let i = 0; i &lt; Front_Page_Logo1_Letters.length; i++) {
    Front_Page_Logo1_Letters[i].addEventListener(&#39;click&#39;, () =&gt; Front_Page_Logo1_NeonGlory(Front_Page_Logo1_Letters[i]));
  }

@import url(&#39;https://fonts.googleapis.com/css?family=Monoton&#39;);
html, body {
margin: 0px;
border: 0px;
padding: 0px;
width: fit-content;
height: fit-content;
/*THIS WAS COMMENTED OUT*/
/*overflow-x: hidden;
overflow-y: auto;*/
background-color: #191919;
background-image: url(&#39;img_tree.gif&#39;);
background-image: url(&#39;imagens/pagina_inicial/congresso_nacional_escurecido_70.png&#39;);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
section#WHOLE_PAGE{
margin: 0px;
border: 0px;
padding: 0px;
top: 0px;
left: 0px;
width: fit-content;
height: fit-content;
/*THIS WAS COMMENTED OUT*/
/*overflow: auto;*/
}
section#SIDE_MENU_SECTION {
margin: 0px;
border: 0px;
padding: 0px;
padding-top: 10vw; 
height: 100%;
width: 0px;
position: fixed; 
z-index: 1; 
top: 0px; 
left: 0px;
display: block;
background-color: lightgray; 
overflow-x: hidden; 
transition: 0.75s; }
.side_menu_div1{
height: 100%;
width: 0px;
transition: 0.75s;
}
.side_menu_close_btn{
margin: 0px;
border: 0px;
padding: 0px;
font-size: max(50px,10vw);
text-decoration: none;
color: white;
position: absolute;
top: 0px;
right: 1vw;
}
.side_menu_text {
margin: 0px;
border: 0px;
padding: 0px;
display: block;
font-size: max(25px,2.5vw);
text-decoration: none;
color: white;
transition: 0.5s;
}
.side_menu_text:hover {
border: 0.5vw dashed white;
cursor: pointer;
font-size: 3vw;
font-weight: bold;
text-decoration: none;
color: black;
}
section#MAIN_CONTENT_SECTION {
margin: 0px;
margin-left: 0px;
border: 0px;
padding: 0px;
width: fit-content;
height: fit-content;
/*THIS WAS COMMENTED OUT*/
/*overflow-x: hidden;
overflow-y: auto;*/
transition: margin-left .75s;
transition-delay: 0s;
list-style-type: none;   
}
section#TOP_BAR_SECTION {
background-color: black;
color: black;
height: fit-content;
width: fit-content;
transition: width 0.75s;
overflow: hidden;
position: sticky;
top: 0%;
left: 0%;
z-index: 10;
}
.top_bar_div1{
margin: 0px;
border: 0px;
padding: 0px;
height: max(50px,10vh);
position: relative;
top: 0px;
left: 0px;
}
.top_bar_div1_logo1{
margin: 0px;
border: 0px;
padding: 0px;
font-family: &#39;Monoton&#39;, cursive;
font-size: max(15px,3vh);
font-weight: 400;
text-align: center;
width: fit-content;
position: absolute;
justify-content: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.top_bar_div1_logo1:hover{
cursor: pointer;  
}
.top_bar_div1_menu1{
margin: 0px;
border-left: 0px;
border-right: 0px;
border-top: max(75px,10vh);
border-bottom: max(75px,10vh);
border-color: #FBFFA0;
border-style:solid;
padding: 0px;
background-color: #FBFFA0;
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: max(22.5px,3vh);
font-weight: 400;
text-align: center;
width: fit-content;
position: absolute;
justify-content: center;
top: 50%;
left: 0%;
z-index: 10;
transform: translate(0%, -50%);
}
.top_bar_div1_menu1:hover{
background-color: #F4FF00;
border-color: #F4FF00;
cursor: pointer; 
color: black;
font-weight: bold;
}
section#CONTENT_SECTION {
background-color: transparent;
height: fit-content;
width: fit-content;
transition: width 0.75s;
}
.content_div1{
width: fit-content;
position: relative;
justify-content: center;
top: 0px;
left: 0px;
}
.content_div1_div1{
margin: 0px;
border: 0px;
padding: 0px;
padding-top: 5vh;
padding-bottom: 2.5vw;
display: inline-block;
width: fit-content;
position: relative;
justify-content: center;
top: 0px;
left: 0px;
justify-content: center;
left: 50%;
transform: translate(-50%, 0);
}
.content_div1_div1_text1{
margin: 0px;
border: 0px;
padding: 0px;
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: max(50px, 7vw); 
-webkit-text-stroke-width: max(1px, 0.14vw);
-webkit-text-stroke-color: black;
text-align: center;
justify-content: center;
}
.content_div1_div1_logo1{
margin: 0px;
border: 0px;
padding: 0px;
font-family: &#39;Monoton&#39;, cursive;
font-size: max(50px, 7.5vw);
font-weight: 400;
text-align: center;
justify-content: center;
}
.content_div1_div2_p{
margin: 0px;
border: 0px;
padding: 10%;
padding-top: 2.5vw;
padding-bottom: 2.5vw;
text-indent: 3vw;
text-align: justify;
font-size: max(21.42px,3vw);
-webkit-text-stroke-width: max(0.42px, 0.06vw);
-webkit-text-stroke-color: black;
}
/* Efeito de Neon na logo do POLITICAGEM */
@-webkit-keyframes text-flicker-in-glow{0%{opacity:0}10%{opacity:0;text-shadow:none}10.1%{opacity:1;text-shadow:none}10.2%{opacity:0;text-shadow:none}20%{opacity:0;text-shadow:none}20.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.25)}20.6%{opacity:0;text-shadow:none}30%{opacity:0;text-shadow:none}30.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.5%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.6%{opacity:0;text-shadow:none}45%{opacity:0;text-shadow:none}45.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}50%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55.1%{opacity:0;text-shadow:none}57%{opacity:0;text-shadow:none}57.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60.1%{opacity:0;text-shadow:none}65%{opacity:0;text-shadow:none}65.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75.1%{opacity:0;text-shadow:none}77%{opacity:0;text-shadow:none}77.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85.1%{opacity:0;text-shadow:none}86%{opacity:0;text-shadow:none}86.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}100%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}}@keyframes text-flicker-in-glow{0%{opacity:0}10%{opacity:0;text-shadow:none}10.1%{opacity:1;text-shadow:none}10.2%{opacity:0;text-shadow:none}20%{opacity:0;text-shadow:none}20.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.25)}20.6%{opacity:0;text-shadow:none}30%{opacity:0;text-shadow:none}30.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.5%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}30.6%{opacity:0;text-shadow:none}45%{opacity:0;text-shadow:none}45.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}50%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.45),0 0 60px rgba(255,255,255,.25)}55.1%{opacity:0;text-shadow:none}57%{opacity:0;text-shadow:none}57.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35)}60.1%{opacity:0;text-shadow:none}65%{opacity:0;text-shadow:none}65.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.35),0 0 100px rgba(255,255,255,.1)}75.1%{opacity:0;text-shadow:none}77%{opacity:0;text-shadow:none}77.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.55),0 0 60px rgba(255,255,255,.4),0 0 110px rgba(255,255,255,.2),0 0 100px rgba(255,255,255,.1)}85.1%{opacity:0;text-shadow:none}86%{opacity:0;text-shadow:none}86.1%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}100%{opacity:1;text-shadow:0 0 30px rgba(255,255,255,.6),0 0 60px rgba(255,255,255,.45),0 0 110px rgba(255,255,255,.25),0 0 100px rgba(255,255,255,.1)}}

&lt;section id=&quot;WHOLE_PAGE&quot;&gt;
&lt;section id=&quot;SIDE_MENU_SECTION&quot;&gt;
&lt;div id=&quot;Side_Menu_Div1&quot; class=&quot;side_menu_div1&quot;&gt;
&lt;a id=&quot;Side_Menu_Close_Btn&quot; class=&quot;side_menu_close_btn&quot; href=&quot;javascript:void(0)&quot; onclick=&quot;CloseSideMenu()&quot;&gt;&amp;times;&lt;/a&gt;
&lt;a id=&quot;Side_Menu_Option1&quot; class=&quot;side_menu_text&quot; href=&quot;#&quot; onclick=&quot;location.href = &#39;sobre.html&#39;;&quot;&gt;Option1&lt;/a&gt;
&lt;a id=&quot;Side_Menu_Option2&quot; class=&quot;side_menu_text&quot; href=&quot;#&quot;&gt;Option2&lt;/a&gt;
&lt;a id=&quot;Side_Menu_Option3&quot; class=&quot;side_menu_text&quot; href=&quot;#&quot;&gt;Option3&lt;/a&gt;
&lt;a id=&quot;Side_Menu_Option4&quot; class=&quot;side_menu_text&quot; href=&quot;#&quot;&gt;Option4&lt;/a&gt;
&lt;a id=&quot;Side_Menu_Option5&quot; class=&quot;side_menu_text&quot; href=&quot;#&quot;&gt;Option5&lt;/a&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section id=&quot;MAIN_CONTENT_SECTION&quot;&gt;
&lt;section id=&quot;TOP_BAR_SECTION&quot;&gt;
&lt;div id=&quot;Top_Bar_Div1&quot; class=&quot;top_bar_div1&quot;&gt;
&lt;h1 id=&quot;Top_Bar_Div1_Menu1&quot; class=&quot;top_bar_div1_menu1&quot; onclick=&quot;OpenSideMenu();&quot; href=&quot;#&quot;&gt;&amp;#9776 Menu&lt;/h1&gt;
&lt;h1 id=&quot;Top_Bar_Div1_Logo1&quot; class=&quot;top_bar_div1_logo1&quot; onclick=&quot;;&quot;&gt;TEXT&lt;/h1&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;section id=&quot;CONTENT_SECTION&quot;&gt;
&lt;div id=&quot;Content_Div1&quot; class=&quot;content_div1&quot;&gt;
&lt;div id=&quot;Content_Div1_Div1&quot; class=&quot;content_div1_div1&quot;&gt;
&lt;h1 id=&quot;Content_Div1_Div1_Text1&quot; class=&quot;content_div1_div1_text1&quot;&gt;Text&lt;/h1&gt;
&lt;h1 id=&quot;Content_Div1_Div1_Logo1&quot; class=&quot;content_div1_div1_logo1&quot;&gt;Text&lt;/h1&gt;
&lt;/div&gt;
&lt;div id=&quot;Content_Div1_Div2&quot; class=&quot;content_div1_div2&quot;&gt;
&lt;p id=&quot;Content_Div1_Div2_P1&quot; class=&quot;content_div1_div2_p&quot;&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;/p&gt;
&lt;p id=&quot;Content_Div1_Div2_P2&quot; class=&quot;content_div1_div2_p&quot;&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;br&gt;Text&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/section&gt;
&lt;/section&gt;
&lt;/section&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

顶部粘性导航栏无法固定在顶部。

问题

答案1

什么可能导致我的 Vue.js fetch API 代码未按预期显示虚拟用户？

Does the top-level-await error mean Webpack is already installed?

React下拉选择：如何访问比显示的数组更多的字段？

“Word-break” 和 “Word-wrap” 在 HTML 邮件中的 CSS 问题。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论