मैं अपनी वेबसाइट पर काम कर रहा हूं और अभी तक कोड के साथ अच्छा नहीं हूं। जब मैं नीचे स्क्रॉल कर रहा हूं तो मैं नेवबार की एक और सामग्री दिखाना चाहता हूं और जब मैं शीर्ष पर हूं, तो मूल नेवबार दिखाई दे रहा है। मैं चाहता हूं कि यह शुद्ध जावास्क्रिप्ट में बिना किसी पुस्तकालय या ढांचे के किया जाए। कृपया नीचे दिए गए कोड देखें और मुझे पता है कि कोड व्यवस्थित नहीं हैं। मैं इसे बाद में करूंगा।


    var nav = document.querySelector("nav");
var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear")

window.onscroll = function(){
    if(document.body.scrollTop > 70){
        hide.style.display = "block";
        appear.style.display = "none"
    } else {
        hide.style.display = "none";
        appear.style.display = "block"
    }
}


    nav{
    list-style-type: none;
    text-align: center;
    background-color: #3FA9A5;
    position: sticky;
    top: 0;
}

.hide{
    font-size: 70px;
    font-family: 'Long Cang', cursive;
    display: block;
}
.appear{
    height: 70px;
    display: none;
}

.appear img{
    width: 210px;

}

ul{
    margin: 0 auto;
    padding: 0;
}

body{
    margin: 0;
}

.container{
    max-width: 1080px;
    width: 95%;
    margin: 10px auto;
    display: grid;
    grid-template-columns: 25% 50% 25%;

}


.text{
    text-align: center;
}


.profile {
    border: 1px solid black;
    padding: 0 10px 20px 10px;

}

#main{
    width: 100%;
}

.post{
    margin-left: 4.165%;
}

#image{
    width: 100%;
}

#post-divide{
    margin-left: 10px;
    margin-right: 10px;
}

.comments{
    width: 100%;
    margin-top: 68.5px;
    padding-bottom: 293.5px;
    border: 1px solid black;
}
 h2{
    text-align: center;
 }

 .center{
    grid-column: 2;
 }



        <link rel="stylesheet" type="text/css" href="test.css">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Long+Cang&display=swap" rel="stylesheet">
    <title>test</title>
</head>
<body>
<nav>
    <ul>
        <li class="hide">Unknown</li>
        <li class="appear"><img src="cat.png"></li>
    </ul>
</nav>

<div class="container">

        <div class="col-1">
            <div class="profile text">
                <img id="main" src="https://data.whicdn.com/images/86629641/superthumb.jpg?t=1384568664">
                <hr>
                <p>12 posts</p>
                <p>instagram</p>
                <button>Subscribe!</button>
            </div>
        </div>

        <div class="col-1">
            <div class="post">
                <h2>TITLE</h2>
                <div>
                    <img id="image" src="https://i.pinimg.com/originals/76/d4/8c/76d48cb2928845dfcfab697ac7cbcf1c.jpg">
                </div>
                <hr id="post-divide">
            </div>
        </div>

        <div class="col-1">
            <div class="comments text"></div>
        </div>

        <div class="col-1 center">
            <div class="post">
                <h2>TITLE</h2>
                <div>
                    <img id="image" src="https://i.pinimg.com/originals/76/d4/8c/76d48cb2928845dfcfab697ac7cbcf1c.jpg">
                </div>
                <hr id="post-divide">
            </div>
        </div>

        <div class="col-1">
            <div class="comments text"></div>
        </div>
</div>

मुझे लगता है कि मुझे जेएस कोड में कुछ जोड़ना चाहिए, लेकिन पता नहीं क्यों आभारी होंगे अगर आप मुझे सलाह देंगे कि मैं एचटीएमएल/सीएसएस कोड कैसे लिख सकता हूं, इसलिए यदि संभव हो तो मुझे 2 नावबार बनाने की ज़रूरत नहीं है

0
Anette X 28 अक्टूबर 2019, 14:40

3 जवाब

सबसे बढ़िया उत्तर
var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear")

तो आपको कक्षा चयनकर्ता का उपयोग करना चाहिए

0
maximelian1986 28 अक्टूबर 2019, 11:44

आप चयनकर्ताओं के रूप में "छिपाएं" और "प्रकट" का उपयोग कर रहे हैं लेकिन वे आपके HTML में मौजूद नहीं हैं।

इसके बजाय अपनी क्वेरी चयनकर्ता में ".hide" और ".appear" का प्रयोग करें।

 var hide = document.querySelector(".hide"); 
 var appear = document.querySelector(".appear");
0
Alvaro Mayo 28 अक्टूबर 2019, 11:47

निम्नलिखित निर्देश:

document.querySelector("hide");

जैसे तत्वों के लिए क्वेरी करेंगे:

<hide></hide>

चूंकि बिना उपसर्ग के सादे चयनकर्ता (div, header, span) संपूर्ण तत्व टैग के लिए क्वेरी करेंगे, न कि कक्षाओं या विशेषताओं के लिए।

हो सकता है कि आप . का उपयोग करके कक्षा के लिए पूछताछ करना चाहते थे:

document.querySelector(".hide");
2
Cristian Traìna 28 अक्टूबर 2019, 11:44