向下滚动时切换导航栏的CSS

Question

我正在尝试通过修改Bootstrap CSS文件制作固定的导航栏。如果我向下滚动，则导航栏的颜色应更改并固定在顶部。

因此，我通过引用this article添加了以下JS代码，但这无效。

import React, { Component } from 'react';

import { StyleSheet, Platform, View, Image, Text, TextInput, TouchableOpacity, Alert } from 'react-native';

var Realm = require('realm');

let realm ;

export default class App extends Component{

  constructor(){

    super();

    this.state = {

      Student_Name : '',

      Student_Class : '',

      Student_Subject : ''

  }

    realm = new Realm({
      schema: [{name: 'Student_Info',
      properties:
      {
        student_id: {type: 'int',   default: 0},
        student_name: 'string',
        student_class: 'string',
        student_subject: 'string'
      }}]
    });

  }

  add_Student=()=>{


    realm.write(() => {

      var ID = realm.objects('Student_Info').length + 1;

       realm.create('Student_Info', {
         student_id: ID,
         student_name: this.state.Student_Name,
         student_class: this.state.Student_Class,
         student_subject : this.state.Student_Subject
        });

    });

    Alert.alert("Student Details Added Successfully.")

  }

  render() {

    var A = realm.objects('Student_Info');

    var myJSON = JSON.stringify(A);

    return (

        <View style={styles.MainContainer}>

          <TextInput
                placeholder="Enter Student Name"
                style = { styles.TextInputStyle }
                underlineColorAndroid = "transparent"
                onChangeText = { ( text ) => { this.setState({ Student_Name: text })} }
              />

          <TextInput
                placeholder="Enter Student Class"
                style = { styles.TextInputStyle }
                underlineColorAndroid = "transparent"
                onChangeText = { ( text ) => { this.setState({ Student_Class: text })} }
              />

          <TextInput
                placeholder="Enter Student Subject"
                style = { styles.TextInputStyle }
                underlineColorAndroid = "transparent"
                onChangeText = { ( text ) => { this.setState({ Student_Subject: text })} }
              />


          <TouchableOpacity onPress={this.add_Student} activeOpacity={0.7} style={styles.button} >

            <Text style={styles.TextStyle}> CLICK HERE TO ADD STUDENT DETAILS </Text>

          </TouchableOpacity>


          <Text style={{marginTop: 10}}>{myJSON}</Text>


        </View>

    );
  }
}

const styles = StyleSheet.create({

 MainContainer :{

  flex:1,
  alignItems: 'center',
  justifyContent: 'center',
  paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
  margin: 10

  },

  TextInputStyle:
    {
      borderWidth: 1,
      borderColor: '#009688',
      width: '100%',
      height: 40,
      borderRadius: 10,
      marginBottom: 10,
      textAlign: 'center',
    },

  button: {

      width: '100%',
      height: 40,
      padding: 10,
      backgroundColor: '#4CAF50',
      borderRadius:7,
      marginTop: 12
    },

  TextStyle:{
      color:'#fff',
      textAlign:'center',
    }

});

let MQL = 992; if ($(window).width() > MQL) { let headerHeight = $("#mainNav").height(); $(window).scroll(function () { if ($(document).scrollTop() > headerHeight) { $("#mainNav").addClass("is-visible"); } else { $("#mainNav").removeClass("is-visible"); } }); } 是用于导航栏的CSS，#mainnav是用于显示导航栏的CSS动画。 is-visible是桌面屏幕的最小宽度。

JSFIDDLE

我该如何解决？

Answer 1

请在此处检查有效的解决方案。

    var headerHeight = $(".clearHeader").height();


$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= headerHeight) {
        $(".clearHeader").addClass("is-visible");
    }else{
      $(".clearHeader").removeClass("is-visible");
    }
});

 

    .clearHeader{
height: 200px; 
background-color: rgba(107,107,107,0.66);
position: fixed;
top:200;
width: 100%;

}


.is-visible {height: 100px;background-color:#1e1e1e}


.wrapper {
height:2000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header class="clearHeader">
</header>

<div class="wrapper">
</div>