jquery Konsole gibt eine undefinierte Ausgabe auf $ ('# div'). Höhe

Ich benutze jquery für meine Kopfzeile zu einem bestimmten Zeitpunkt unfixiert werden. Es funktioniert gut, aber wenn ich versuche, die Höhe meines Headers zu bekommen, gibt es ein undefiniertes Ergebnis.

HTML

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Test</title> 
<link rel="stylesheet" href="style.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script type="text/javascript" src="header.js"></script> 
</head> 
<body> 
<header> 
    <div id="header"> 
    <nav> 
     <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Contact</a></li> 
     <li><a href="#">About</a></li> 
     </ul> 
    </nav> 
    </div> 
</header>

JQuery

$.fn.followTo = function (height) { 
var $window = $(window); 

$window.scroll(function (e) { 
    if ($window.scrollTop() > height) { 
     $('#header').css({ 
      position: 'absolute', 
      top: height 
     }); 
    } else { 
     $('#header').css({ 
      position: 'fixed', 
      top: 0 
     }); 
    } 
}); 
}; 
var windowHeight = $(window).height(); 
var headerHeight = $('#header').height(); 
console.log(windowHeight, headerHeight); 

$('#header').followTo(windowHeight-headerHeight);

Wie Sie wahrscheinlich die header.js extern ist sehen, aber das sollte keine Probleme geben.

Quelle

2017-03-01 Jeroen van der Wal

ist dieser Code in der Fußzeile oder am Ende der Seite? –

Wie Sie gesagt thhat dieser Code in externe Datei ist und Sie es in <head> .So hinzugefügt

Was passiert ist: -

Ihr jQuery-Code registriert, bevor das Dokument fertig/komplett gerendert ist. Deshalb wird es kein HTML Element erkennen und wird nicht funktionieren

Wenn Sie es auf der Unterseite setzen, wird es warten, bis Dokument bereit/richtig gerendert wird und dann wird Ihr jQuery-Code registriert und wird alle HTML-Elemente erkennen und fange an zu arbeiten

Ich hoffe es wird jetzt deine Zweifel beseitigen.

Lösung: -

Legen Sie das externe Jquery-Datei auf der Unterseite der aktuellen Datei.

Quelle

2017-03-01 20:47:56

Das Problem hier ist, dass Sie versuchen, eine Höhe für ein Element zu erhalten, bevor die Seite überhaupt vollständig ausgelegt ist. Daher kann der Browser noch keine Höhe ermitteln (und gibt null zurück).

Versuchen Sie den Code in eine Lade Event-Handler zu setzen:

$(document).load(function(){ 
// your code here 
});

Quelle

2017-03-01 20:05:28 Psi

Ich habe versucht, $ (Dokument) .load (function() {...}); aber es gab "Uncaught TypeError: a.indexOf ist keine Funktion". Also habe ich auch versucht $ (document) .on ('load', function() {...}); und es gab nichts zurück. –

@JeroenvanderWal i der Jquery Code ist am Ende der Seite? oder hinzugefügt irgendwo in '' –

@Anant Es ist in einer separaten .js-Datei und ich importierte es in der . –

@Jeoren: Der Grund, warum die meisten der jQuery am unteren Rand der Seite gehen, da Sie DOM für die Manipulation bereit sein müssten. Sie können auch externe Datei im Header haben, nur um sicher zu machen, schreiben:

$(function(){ 
 
//your code goes here 
 
});

Sie müssen auch sicherstellen, dass Ihre externe js Seite nach jQuery-Bibliothek, um $ Objekt zu erhalten hinzugefügt . Ich hoffe das hilft!

Quelle

2017-03-01 21:01:25

jquery Konsole gibt eine undefinierte Ausgabe auf $ ('# div'). Höhe

Antwort

Verwandte Themen