试图让我的导航栏粘在页面顶部并随之滚动

时间:2015-07-16 02:52:41

标签: javascript html css

我知道如何使用namespace OPC_Client { public partial class Form1 : Form { public Form1() { InitializeComponent(); } OPCServer KepServer; OPCGroups KepGroups; OPCGroup KepGroup; OPCItems KepItems; OPCItem KepItem; string strHostIP = ""; string strHostName = ""; bool opc_connected = false; int itmHandleClient = 0; int itmHandleServer = 0; private bool CreateGroup() { try { KepGroups = KepServer.OPCGroups; KepGroup = KepGroups.Add("OPCDOTNETGROUP"); SetGroupProperty(); KepGroup.DataChange += new DIOPCGroupEvent_DataChangeEventHandler(KepGroup_DataChange); KepGroup.AsyncWriteComplete += new DIOPCGroupEvent_AsyncWriteCompleteEventHandler(KepGroup_AsyncWriteComplete); KepItems = KepGroup.OPCItems; } catch (Exception) { return false; } return true; } private void SetGroupProperty() { KepServer.OPCGroups.DefaultGroupIsActive = true; KepServer.OPCGroups.DefaultGroupDeadband = 0; KepGroup.UpdateRate = 1000; KepGroup.IsActive = true; KepGroup.IsSubscribed = true; } private void RecurBrowse(OPCBrowser OPCBrowser) { OPCBrowser.ShowBranches(); OPCBrowser.ShowLeafs(true); listBox1.Items.Clear(); foreach (object turn in OPCBrowser) { bool bl = turn.ToString().Contains("System") ; if (bl == false) { if (!Regex.IsMatch(turn.ToString(), @"^(\w+\.\w+\.\w+)$")) { } else { listBox1.Items.Add(turn.ToString()); } } } } private bool ConnectRemoteServer(string remoteServerIP, string remoteServerName) { try { KepServer.Connect(remoteServerName, remoteServerIP); } catch (Exception ex) { MessageBox.Show(""+ex); return false; } return true; } // Write the TAG value when executed event void KepGroup_AsyncWriteComplete(int TransactionID, int NumItems, ref Array ClientHandles, ref Array Errors) { lblState.Text = ""; for (int i = 1; i <= NumItems; i++) { lblState.Text += "Tran:" + TransactionID.ToString() + " CH:" + ClientHandles.GetValue(i).ToString() + "Error:" + Errors.GetValue(i).ToString(); } } void KepGroup_DataChange(int TransactionID, int NumItems, ref Array ClientHandles, ref Array ItemValues, ref Array Qualities, ref Array TimeStamps) { for (int i = 1; i <= NumItems; i++) { if (Qualities.GetValue(i).ToString() == "192") { // add realtime value to texbox to display txtTagValue.Text = ItemValues.GetValue(i).ToString(); txtQualities.Text = Qualities.GetValue(i).ToString(); txtTimeStamps.Text = TimeStamps.GetValue(i).ToString(); } else { MessageBox.Show("disconnected to opc server"); txtQualities.Text = Qualities.GetValue(i).ToString(); txtTimeStamps.Text = TimeStamps.GetValue(i).ToString(); } } } private void listBox1_SelectedIndexChanged(object sender, EventArgs e) { try { if (itmHandleClient != 0) { Array Errors; OPCItem bItem = KepItems.GetOPCItem(itmHandleServer); int[] temp = new int[2] { 0, bItem.ServerHandle }; Array serverHandle = (Array)temp; KepItems.Remove(KepItems.Count, ref serverHandle, out Errors); } itmHandleClient = 1; KepItem = KepItems.AddItem(listBox1.SelectedItem.ToString(), itmHandleClient); itmHandleServer = KepItem.ServerHandle; } catch (Exception err) { itmHandleClient = 0; txtTagValue.Text = "Error ox"; txtQualities.Text = "Error ox"; txtTimeStamps.Text = "Error ox"; MessageBox.Show("The reserved for system entry:" + err.Message, "message"); } } private void Form1_Load(object sender, EventArgs e) { //GetLocalServer(); KepServer = new OPCServer(); } private void Form1_FormClosing(object sender, FormClosingEventArgs e) { if (!opc_connected) { return; } if (KepGroup != null) { KepGroup.DataChange -= new DIOPCGroupEvent_DataChangeEventHandler(KepGroup_DataChange); } if (KepServer != null) { KepServer.Disconnect(); KepServer = null; } opc_connected = false; } private void btnSetGroupPro_Click(object sender, EventArgs e) { SetGroupProperty(); } private void btnConnLocalServer_Click(object sender, EventArgs e) { try { if (!ConnectRemoteServer(txtRemoteServerIP.Text.Trim(), "KEPware.KEPServerEx.V5")) { return; } btnSetGroupPro.Enabled = true; opc_connected = true; GetServerInfo(); RecurBrowse(KepServer.CreateBrowser()); if (!CreateGroup()) { return; } } catch (Exception ex) { MessageBox.Show("" + ex); } } private void btnWrite_Click(object sender, EventArgs e) { OPCItem bItem = KepItems.GetOPCItem(itmHandleServer); int[] temp = new int[2] { 0, bItem.ServerHandle }; Array serverHandles = (Array)temp; Object[] valueTemp = new Object[] { "", txtWriteTagValue.Text }; Array values = (Array)valueTemp; Array Errors; int cancelID; KepGroup.AsyncWrite(1, ref serverHandles, ref values, out Errors, 2009, out cancelID); GC.Collect(); } } 让它与页面一起滚动,但我的导航栏不在页面的顶部。我希望导航栏直接保留在标题下,直到页面顶部点击它,然后我希望它向下滚动页面。我已经尝试使用JS来执行此操作并使用JSfiddle我能够使其工作http://jsfiddle.net/uaqh018d/78/

但是,当我将此应用到我的网站时,它不起作用,我无法弄清楚原因。

要遵循的网站代码:

HTML

position: fixed;

CSS

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

<!--begin header & navbar-->

<div class="header">

        <div class="container">

            <div class="banner">
                <h1><img src="media/CSG%20header%20final.svg" width="961" height="250" alt="crit strike gaming header"></h1>                    
            </div>

            <div class="nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Reviews</a></li>    
                    <li><a href="#">Previews</a></li>
                    <li><a href="#">Lets Plays</a></li>
                    <li><a href="#">Forums</a></li>                         
                </ul>
            </div>  
        </div>      
   </div>

   <!--end header & navbar-->       

   <!-- begin content-->    

   <div class="container">  

    <div class="content">


    </div>

   </div>

   <!--end content-->

   <script type="text/javascript" src="navfunction.js"></script>

</body>
</html>

JS

body{
    background: #ffda0a;
    width: 100%;
    margin: auto;
}

.container{
    width: 960px;
    margin: 0 auto;
}

.header{
    width: 100%;
    height: 250px;
    margin: 0 auto;
    top: 0;
}

.content{
    background-color: rgba(255,255,255,.5);
    width: 100%;
    margin: 0 auto;
    margin-left: 1px;
    clear: both;
}

a{
    text-decoration: none;
    color: #ffda0a;
}

li{
    list-style: none;
    margin-left: 75px;
    float: left;
    font-size: 25px;
}

.nav{
    background: #a71e1f;
    width: 960px;
    height: 30px;
    margin-left: 1px;   
}

.nav.fixed {
    display: block;
    position: fixed;
    top: 0;
    width: 100%;
}

.banner{
    height: 230px;
}

如果有人能够找出问题,我会非常感激。

1 个答案:

答案 0 :(得分:1)

查看更正后的小提琴 - http://jsfiddle.net/drecodeam/8Lubmkvw/

您正在使用HTML中的类,但在jQuery中将其作为ID访问。

更正的JS应该是

$(document).ready(function () {
    $(window).scroll(function () {
        var distanceFromTop = $(document).scrollTop();
        if (distanceFromTop >= $('.header').height()) {
            $('.nav').addClass('fixed');
        } else {
            $('.nav').removeClass('fixed');
        }
    });
});