javascript - jQuery Sticky Sidebar failing -


First of all I did not write this code. I found it on someone else's website and i want to learn it from myself trying it out though i can not work it i have googled for code if it is a jQuery plugin that is freely Is available or anything, but I can not find it anywhere on the web.

I have given it a "sticky" class (with Sidebar ID # sidebar), I have included jQuery at the top of the page, and I have placed this code in the head:

< Pre> & lt ;! - Floating Sidebar JQuery - & gt; & Lt; Script type = "text / javascript" & gt; Var sticky = function ($ obj, opts) {$ (. Window) .scroll (function (e) {sticky .oncroll (e, $ obj, opts);}); } Sticky.onecroll = function (e, $ o, ops) {var iScrollTop = $ (window) .scrollTop (); Var sClass = "sticky"; // Set Original Data (! $ O.data (sClass)) {$ o.data (sClass, {css: {status: $ o.css ('condition'), top: $ o.css ('top ')}, Offset: $ o.offset ()}); } Var oOrig = $ o.data (sClass); Var bIsSticky = $ o.hasClass (sClass); If (iScrollTop & gt; orig.offset.top & BIsSticky) {$ o.css ({status: 'fixed', top: 0}). AddClass (sClass); } And if (iScrollTop & lt; oOrig.offset.top & bIsSticky) {$ o.css (oOrig.css) .removeClass (sClass); }} Sticky ($ ('# sidebar')); & Lt; / Script & gt;

As you can see, the last JS line sticky ($ ('# sidebar')); However, when you scroll down, this error is written on the log of Chrome:

Unkit type error: undefined property 'offset' Can not read

Firebug is a bit and verbose, and says:

oOrig is undefined: if (iScrollTop> oOrig .offset.top & amp; amp ;! BIsSticky) {I am trying to understand this but someone helps me by looking at why it does not work Tax Used to be?

Thank you!

Jack

Wow, new answer ... Thanks Felix

Wrap the function call in the finished function. 

  $ (function () {sticky ($ ('# sidebar'))});

When you call sticky ($ ('# sidebar'), the probability of not getting a dome is most likely, so when the data is set to does not do anything realistic: 

  $ o.data (sClass, {css: {status: $ o.css (' Position '), top: $ o CSS (' top ')} Offset: $ o.offset ()};]

So when it gets data on line: 

  var oOrig = $ o.data (sClass);

This can not actually get the data.

Ace That's because DOM is not ready to manipulate elements because DOM is not ready yet.

H2> Old Answer (Not Right!)

$ Offset is a Function .

Problem in this line: 

  if (iScrollTop> OOrig.offset.top & BIsSticky) {  
 It is:  oOrig.offset  is a function, is not a variable, then  oOrig.offset.top  is not valid. Just call the function and it with the top property A variable will return that you have access Can and are: 
 
  if (iScrollTop & gt; Oreg.offset () Top & amp; Amp; Amp;!! BIsSticky) { 
 
 Interpretation: 
 
    function is the reference (function in jquery). 
 
 You must call the function to access the  .top  property.

-

Comments

Post a Comment

Popular posts from this blog

Eclipse CDT variable colors in editor -

I hope this is a good question to ask here. This programming is related, so I thought it would be better than the superuser, so I am using the CDT C ++ Eclipse plugin. I know how the editor changes colors for some things But is there a way to do that all the variables are different colors? For example in KDEValue, it sets the local variables and square variables in different colors and bold square squares. Can I copy it to CDT? Eclips provides some level of color customization for text editor syntax You can see it on the following: There are many elements, including the Window> Preferences> C / C ++> Editor> Syntax color code that can be changed, assembly, Comments, Preprocessor and Doxian Under the code, it is possible to change the color of some variable types, such as global variables, local variable announcements, local variable references, and parameter variables. But I do not think the code is capable of changing the color of each variable declared....
Read more

AJAX doesn't send POST query -

$ (दस्तावेज़) .ready (function () {function ajaxselectrss (rssurlvar) {var ajaxRequest; // वेरिएबल जो अजाक्स को संभव बनाता है! कोशिश करें कि {// ओपेरा 8.0+, फ़ायरफ़ॉक्स, सफारी अजाक्स अनुरोध} = नया एक्सएमएलएचटीपीआरइवेस्ट ();} कैच (ई) {// इंटरनेट एक्सप्लोरर ब्राउज़र्स {ajaxRequest = new ActiveXObject ("Msxml2.XMLHTTP");} पकड़ो (ई) {try {ajaxRequest = new ActiveXObject ("Microsoft.XMLHTTP");} कैच (ई) {// कुछ गलत चेतावनी ("आपका ब्राउज़र तोड़ दिया!"); वापसी झूठी;}}} // एक बनाएं फ़ंक्शन जो सर्वर से भेजे गए डेटा प्राप्त करेंगे ajaxRequest.onreadystatechange = function () {if (ajaxRequest.readyState == 4) {var ajaxDisplay = document.getElementById ('news'); ajaxDisplay.innerHTML = ajaxRequest.responseText;}} / / Var rssurlvar = $ (this) .attr ("title"); var queryString = "rurl =" + rssurlvar; var urltofile = "rssget.php"; ajaxRequest.open ("पोस्ट", urltofile, सच); ajaxRequ Est.setRequestHeader ("सामग्री-प्र...
Read more

wpf - Custom Message Box Advice -

Well, I'm using a custom window box that comes with some custom control boxes that accompany the text The producers who are displayed are called. I have a defined event, which has been subscribed through the original class, it gets burnt when clicking on the button. However, I can not see how to use it effectively, I would like to return one yes, whether yes or not, but obviously my code will continue to execute, so this Below is some example code to clarify the problem that the method has subscibed by clicking on the button. Message box window Public partial class custom message box: window {public representative message messagebox object sender, event events e); Public event messagebox handler messagebox document; Public Customs Box () {Initial group (); } Public Customsbox (String Message) {InitializeComponent (); This.txtdescription.Text = Message; } Public Customsbox (String Message, String Title, String First BTNtext) {Initialization (); This.lbltitle.Content =...
Read more