Call additional option methods in JavaScript

debugcn Published at Dev

Tomster

I'm using stickjs script and can't seem to call "options" method in code. I've pasted it below.

I'm not sure if I need first initialize "options" ie. .sticky(options ({options_here, option_2});

I've tried both ways, but it is till not calling another css class when the div sticks to top:

You can see I've done for 2 options: { topSpacing: 0, className: "#newheader" } - #newheader should be showing a different color per CSS.

What am I missing? Thanks!

<html>
<head>
  <title>Sticky Plugin</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="jquery.sticky.js"></script>
  <script>
    $(window).load(function(){
      $("#header").sticky({ topSpacing: 0, className: "#newheader" })
    });

  </script>


  <style>
    body {
      height: 10000px;
      padding: 0;
      margin: 0;
    }

    #header {
      background: #bada55;
      color: white;
      font-family: Droid Sans;
      font-size: 18px;
      line-height: 1.6em;
      font-weight: bold;
      text-align: center;
      padding: 10px;
      text-shadow: 0 1px 1px rgba(0,0,0,.2);
      width:100%;
      box-sizing:border-box;
    }

    #newheader {
    background: #FF0004;
      color:#0056F2;
      font-family: Droid Sans;
      font-size: 24px;
      line-height: 1.6em;
      font-weight: bold;
      text-align: center;
      padding: 10px;
      text-shadow: 0 1px 1px rgba(0,0,0,.2);
      width:100%;
      box-sizing:border-box;
    }
  </style>
</head>
<body>
  <p>This is test this is text this is text at the top.</p>
  <div id="header">
    <p>This is the sticky thingy that is really cool.</p>
  </div>
  <p>This is test this is text this is text at the bottom.</p>
</body>
</html>

Steven Web

The ClassName property adds a CLASS-name to the element. So its no ID!! Try:

$("#header").sticky({ topSpacing: 0, className: "newheader" });

And alter your css like:

 .newheader {
      background: #FF0004;
      .....
  }

UPDATE:

After reading the Sticky documentation it was clear... The new class will be added to the parent element. So you must change you css cascading to:

.newheader #header {
   background: #FF0004;
   color:#0056F2;
   font-family: Droid Sans;
   font-size: 24px;
   line-height: 1.6em;
   font-weight: bold;
   text-align: center;
   padding: 10px;
   text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
   width:100%;
   box-sizing:border-box;
 }

That will save your day!

Collected from the Internet

Please contact [email protected] to delete if infringement.