如何将滚动触发的顶部横幅jQuery代码改为页面加载时触发？

I see the issue here—your original code was tied to the scroll event, and when you swapped it for load or ready, the logic didn't behave as expected because you were still carrying over redundant conditional checks. Let's simplify this to make the utility bar stay visible from the moment the page finishes loading.

Modified Code #

jQuery(function( $ ){ 
    // Execute immediately when the DOM is fully ready
    var utilityBarHeight = $(".utility-bar")[0].clientHeight; 
    $(".site-header.dark").css("top", utilityBarHeight + "px"); 
    $(".utility-bar").addClass("reveal"); 
}); 

Why This Works #

1. Removed Scroll Event Dependency: Since you want the bar to stay visible permanently, we don't need to listen for scroll events anymore—no more unnecessary repeated checks as the user scrolls.
2. Direct Execution on DOM Ready: The jQuery(function($){...}) wrapper ensures this code runs the second the DOM is fully loaded, so the bar is set to visible right when the page renders.
3. Cut Redundant Conditionals: Your original if($(document).scrollTop() >= 0) check is always true (scrollTop can never be negative), so we can skip the conditional entirely and directly apply the required classes and styles.

Quick Troubleshooting Tip #

If the bar still doesn't appear after this change:

• Double-check that the .utility-bar element exists in the DOM when this code runs (the DOM ready wrapper should guarantee this)
• Verify your CSS for the reveal class—make sure it overrides any default hiding styles (like display: none, opacity: 0, or transform: translateY(-100%))

内容的提问来源于stack exchange，提问作者Micah Bickford