如何使Javascript函数在Rails应用程序中工作？

Question

I'm getting this error message:

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. 

and this second line of code is being flagged

var nav                 = document.querySelector('.navv'),
nav_height          = getComputedStyle(nav).height.split('px')[0],

I'm in the middle of converting a static webpage into a Ruby on Rails app and this code works just fine on the original project, but I'm getting this error message on Rails. How do I get this code working again?

Here is the rest of the function for refrence:

var nav                 = document.querySelector('.navv'),
nav_height          = getComputedStyle(nav).height.split('px')[0],
nav_links           = document.querySelector('.nav-links'),
//nav_links_height    = getComputedStyle(nav_links).height.split('px')[0],
sticky_class        = 'is-fixed';
//unfixed             = 'unfixed'


function stickyScroll(e) {

if( window.pageYOffset > (nav_height) ) {
nav_links.classList.add(sticky_class);
}

if( window.pageYOffset < (nav_height) ) {
nav_links.classList.remove(sticky_class);

 }
}

Answer 1

You are not actually checking if the element exists before calling window.getComputedStyle .

Document.querySelector()
Returns null if no matches are found; otherwise, it returns the first matching element.
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

When dealing with the DOM you should always code defensively and ensure that an element actually exists before trying to use it.

var nav = document.querySelector('.navv'),
  nav_height,
  nav_links,
  sticky_class = 'is-fixed';

if (nav) {
  // Calling global functions explicitly is good style
  nav_height = window.getComputedStyle(nav).height.split('px')[0];
  nav_links = document.querySelector('.nav-links');
}

function stickyScroll(e) {
  if( window.pageYOffset > (nav_height) ) {
    nav_links.classList.add(sticky_class);
  }

  if( window.pageYOffset < (nav_height) ) {
    nav_links.classList.remove(sticky_class);
  }
}

Better yet would be to refactor:

function stickyScroll(e, nav_links) {
  var nav_height = e.offsetHeight,
      sticky_class = 'is-fixed';
  if( window.pageYOffset > (nav_height) ) {
    nav_links.classList.add(sticky_class);
  }
  if( window.pageYOffset < (nav_height) ) {
    nav_links.classList.remove(sticky_class);
  }
}

Because if you are using this as an event handler when the window is resized that you will need reevaluate the height of .navv .