0

base.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'style/baseStyle.css' %}">
    <script src="{% static 'js/basejs.js' %}"></script>
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body>
    <div class="top-container">
        <h1>Scroll Down</h1>
        <p>Scroll down to see the sticky effect.</p>
    </div>

    <div class="header" id="myHeader">
        <h2>Fixed Header</h2>
    </div>

    <div>
        <h1>Working CSS</h1>
        <h1>Working CSS</h1>
        <h1>Working</h1>
        <h1>Working</h1>
        <h1>Working</h1>
        <h1>Working</h1>
        <h1>Working</h1>
        <h1>Working</h1>
        <h1>Working</h1>
        <h1>Working</h1>
        <h1>Working</h1>
        <h1>Working</h1>
        <h1>Working</h1>
        <h1>Working</h1>
        <h1>Working</h1>
        <h1>Working</h1>
        <h1>Working</h1>
        <h1>Working</h1>
        <h1>Working</h1>
        <h1>Working</h1>
        <h1>Working</h1>
        <h1>Working</h1>
        <h1>Working</h1>
        <h1>Working</h1>
        <h1>Working</h1>
        <h1>Working</h1>
        <h1>Working</h1>
        <h1>Working</h1>
        <h1>Working</h1>
        <h1>Working</h1>
    </div>

</body>
</html>

baseStyle.css

.header{
    padding: 10px 15px;
    background-color: #2F4F4F; /*DarkSlateGray*/
    color: #D3D3D3; /*LightGray*/
}


.sticky{
    position: fixed;
    top: 0;
    width: 100%;
}

.top-container {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

basejs.js

window.onscroll = function() {fixedHeader()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;


function fixedHeader(){
    if(window.pageYOffset >= sticky){
        header.classList.add("sticky");
    }
    else{
        header.classList.remove("sticky");
    }
}

I've included css and js file properly to the html file. This don't make the header sticky with scrolling. But if I place the basejs.js file's code inside base.html, it works fine. Why external js file doesn't work here? Help me to solve this problem.

Thanks in Advance.

Mahmood Al Rayhan
  • 642
  • 5
  • 14
  • 1
    What errors do you get in the browser's console? – j08691 Apr 15 '18 at 19:06
  • 1
    Are you sure the js file is being included by opening the link from page source ? – anees Apr 15 '18 at 19:07
  • make sure that the file is being properly linked. check browser console for errors and check the url to the js file in view source and make sure it loads when you visit it. – Jay Lane Apr 15 '18 at 19:11
  • @j08691 I get no error, but the js code doesn't work. – Mahmood Al Rayhan Apr 15 '18 at 19:27
  • What is `` rendering as? I don't know what templating script that is but I don't recognize. Please add the appropriate tag for it. – j08691 Apr 15 '18 at 19:28
  • One possible problem is that the global variables you define have no content yet, as the document hasn't been fully rendered when you define them. But the same would be true with internal JavaScript in the head. – Mr Lister Apr 15 '18 at 19:42

1 Answers1

0

try wrapping your js code so it executes on load, or add script at bottom of body instead in head

Mladen Skrbic
  • 154
  • 2
  • 12