Fixed JavaScript Warning - Pin to Top of Page Using CSS Position

StackOverflow https://stackoverflow.com/questions/11194342

  •  16-06-2021
  •  | 
  •  

سؤال

I am working on a noscript chunk of code whereby I do some stuff that includes a <p> at the top of the page that alerts the users that he/she has JavaScript disabled.

The end result should look like the Stack Exchange sites when JavaScript is disabled (here is a screenshot of mine - SE looks similar except it is at the very top of the page):

enter image description here

I have it working OK, but I would love it if the red bar stayed fixed along the top, upon scrolling.

I tried using the position: fixed; method, but it ends up moving the p element and I can't get it to look exactly the same as it does without the position: fixed; modification. I tried fiddling with CSS top and left and other positioning but it doesn't ever look like I want it to.

Here is a CSS snippett:

<noscript>

<style type="text/css">

p.noscript_warning {
    position: fixed;
}

</style>

</noscript>
هل كانت مفيدة؟

المحلول

You should not have a space after the ..

p.noscript_warning {
    position: fixed;
    top: 0;
    width: 100%; /* For Browser Compatibility */
}

Check out the Fiddle here... :)

نصائح أخرى

sometimes all you need to do is change the document header when using position fixed. For some reason windows is picky about that. If your doctype is strict you need to change it to this: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

p. noscript_warning {
  position: fixed;
  margin:0;
  top:0; /* Not necessarily */
}
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top