如何使用JavaScript或jqueries实现以下功能

时间：2015-05-06 23:21:43

标签： javascript html css

我希望问题按钮粘在屏幕的底部，当页面向下滚动以使其位于页脚上时。再次，当我点击“问题”按钮并向下滚动它以便坐在页脚上时，我希望表单也能同样粘在屏幕底部。 

#myDiv{
	max-width: 300px;
	background-color: blue;
	border-radius: 5px;
}

button,
input,
optgroup,
select,
textarea{
	margin: 5px;
}
	
legend{
	background: url(chat.png) no-repeat 1px 12px;
	font-size: 18px;
	font-family: Open+Sans!important;
	width: 90%;
	font-weight: bold;
	color: #75777B;
	padding: 15px 22px 10px 35px;
	font-size: 16px;
	margin: 15px;
	font-weight: bold;
}

	
.box1,
.box2,
.box3,
.boxinfo{
	margin-left: 15px;
	font-family: Open+sans !important;
	font-size: 16px;
}

#box1{
	margin-left: 5px;
	margin-right: 15px;
	border-radius: 5px;
	border: 1px solid #e3e3e3;
	width: 175px;
}

#box2{
	margin-left: 5px;
	margin-right: 15px;
	border-radius: 5px;
	border: 1px solid #e3e3e3;
	width: 175px;
}

#box3{
	border-radius: 5px;
	border: 1px solid #e3e3e3;
	margin-left: 5px;
	margin-right: 15px;
	width: 175px;
}

#boxbuton{
	float: right;
	margin-right: 28px;
	border-radius: 5px;
	border: 1px solid #e3e3e3;
	width: 120px;
	height: 35px;
	margin-top: 15px;
	color: #fff;
	font-weight: bold;
	background: #8F9091;
	border: none;
}

#boxinfo{
	background-color: #fff;
	width: 175px;
	height: 25px;
	border-radius: 5px;
	margin-left: 16px;
	margin-right: 15px;
	border: 1px solid #e3e3e3;
}

.switchbuton{
	background-color: rgb(255,237,0);
	box-shadow:  0px -4px 3px rgb(17, 17, 17);
	border-radius: 5px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	font-family: Open+Sans!important;
	font-size: 18px;
	border: none;
	width: 205px;
	height: 45px;
	color: #75777B;
	font-weight: bold;
	background: blue url('chat.png') no-repeat 15px 10px;
    text-indent: 35px;
}

.footer {
  padding-top: 40px;
  padding-bottom: 40px;
  border-top: 5px solid #eee;
}


.nav-justified {
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
}


.jumbotron {
  text-align: center;
  background-color: transparent;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="container">

        <!-- The justified navigation menu is meant for single line per list item.
	           Multiple lines will require custom code not provided by Bootstrap. -->
        <div class="masthead">
            <h3 class="text-muted">Project name</h3>
            <nav>
                <ul class="nav nav-justified">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Downloads</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>

        <!-- Jumbotron -->
        <div class="jumbotron">
            <h1>Marketing stuff!</h1>
            <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.</p>
            <p><a class="btn btn-lg btn-success" href="#" role="button">Get started today</a></p>
        </div>

        <!-- Example row of columns -->
        <div class="row">
            <div class="col-lg-4">
                <h2>Safari bug warning!</h2>
                <p class="text-danger">As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
            </div>
            <div class="col-lg-4">
                <h2>Heading</h2>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
            </div>
            <div class="col-lg-4">
                <h2>Heading</h2>
                <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
                <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
            </div>
        </div>
        <div class="container">
            <div id="myDiv">
                <button type="button" id="hide" class="close" data-dismiss="myDiv" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <legend>Question?</legend>
                <form action="https://chat.scb.gm/ccp/chat/form/100000" method="post" target="_blank" onsubmit="return window.confirm(&quot;You are submitting information to an external page.\nAre you sure?&quot;);">

                    <span class="box1">Theme</span>
                    <input type="text" name="extensionField_Title" id="box1">
                    <br>
                    <span class="box2">Name</span>
                    <input type="text" name="extensionField_Name" id="box2">
                    <br>
                    <span class="box3">Phone</span>
                    <input type="text" name="extensionField_PhoneNumber" id="box3">
                    <br>
                    <span class="boxinfo">About</span>
                    <select name="extensionField_ccxqueuetag" id="boxinfo">
                        <br>
                        <option value="Chat_Csq23"></option>
                    </select>
                    <br>
                    <input type="submit" value="Continue" id="boxbuton">
                    <input type="hidden" name="author" value="Customer">
                    <br>
                    <input type="hidden" name="title" value="ccx chat">
                    <br>
                    <input type="hidden" name="extensionField_h_widgetName123456" value="Premium">
                    <br>

                    <input type="hidden" name="extensionField_chatLogo" value="">
                    <br>
                    <input type="hidden" name="extensionField_chatWaiting" value="Welcome. Please wait while we connect you to a customer care representative.">
                    <input type="hidden" name="extensionField_chatAgentJoinTimeOut" value="All customer care representatives are busy. Please wait or try again later.">
                    <input type="hidden" name="extensionField_chatError" value="Sorry, the chat service is currently not available. Please try again later.">
                </form>
            </div>
            <input id="info" type="button" onClick="this.style.visibility= 'hidden';" value="Question?" class="switchbuton">
        </div>
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            $(function() {
                var button = document.getElementById("info");
                var myDiv = document.getElementById("myDiv");

                function show() {
                    myDiv.style.visibility = "visible";
                }

                function hide() {
                    myDiv.style.visibility = "hidden";
                }

                function toggle() {
                    if (myDiv.style.visibility === "hidden") {
                        show();
                    } else {
                        hide();
                    }
                }
                $("#hide").click(function() {
                    myDiv.style.visibility = "hidden";
                    button.style.visibility = "visible";
                });

                hide();

                button.addEventListener("click", toggle, false);
            });
        </script>

        <!-- Site footer -->
        <footer class="footer">
            <p>&copy; Company 2014</p>
        </footer>
    </div>
</body>

</html>

1 个答案:

答案 0 :(得分：0)

var x = document.getElementById("info").offsetTop;
anchorButton=function(){
  if(window.scrollY < (x - window.innerHeight)){
     document.getElementById("info").className = "switchbutton infoStuck";
  }else{
    document.getElementById("info").className = "switchbutton";
  }
}
window.addEventListener('scroll', anchorButton, false);

var y = document.getElementById("myFormDiv").offsetTop;
anchorForm=function(){
  console.log(y);
  if(window.scrollY < (y - window.innerHeight)){
     document.getElementById("myFormDiv").className = "myDiv infoStuck";
  }else{
    document.getElementById("myFormDiv").className = "myDiv";
  }
}
window.addEventListener('scroll', anchorForm, false);
.myDiv{
	max-width: 300px;
	background-color: blue;
	border-radius: 5px;
}

button,
input,
optgroup,
select,
textarea{
	margin: 5px;
}
	
legend{
	background: url(chat.png) no-repeat 1px 12px;
	font-size: 18px;
	font-family: Open+Sans!important;
	width: 90%;
	font-weight: bold;
	color: #75777B;
	padding: 15px 22px 10px 35px;
	font-size: 16px;
	margin: 15px;
	font-weight: bold;
}

	
.box1,
.box2,
.box3,
.boxinfo{
	margin-left: 15px;
	font-family: Open+sans !important;
	font-size: 16px;
}

#box1{
	margin-left: 5px;
	margin-right: 15px;
	border-radius: 5px;
	border: 1px solid #e3e3e3;
	width: 175px;
}

#box2{
	margin-left: 5px;
	margin-right: 15px;
	border-radius: 5px;
	border: 1px solid #e3e3e3;
	width: 175px;
}

#box3{
	border-radius: 5px;
	border: 1px solid #e3e3e3;
	margin-left: 5px;
	margin-right: 15px;
	width: 175px;
}

#boxbuton{
	float: right;
	margin-right: 28px;
	border-radius: 5px;
	border: 1px solid #e3e3e3;
	width: 120px;
	height: 35px;
	margin-top: 15px;
	color: #fff;
	font-weight: bold;
	background: #8F9091;
	border: none;
}

#boxinfo{
	background-color: #fff;
	width: 175px;
	height: 25px;
	border-radius: 5px;
	margin-left: 16px;
	margin-right: 15px;
	border: 1px solid #e3e3e3;
}

.switchbuton{
	background-color: rgb(255,237,0);
	box-shadow:  0px -4px 3px rgb(17, 17, 17);
	border-radius: 5px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	font-family: Open+Sans!important;
	font-size: 18px;
	border: none;
	width: 205px;
	height: 45px;
	color: #75777B;
	font-weight: bold;
	background: blue url('chat.png') no-repeat 15px 10px;
    text-indent: 35px;
}

.footer {
  padding-top: 40px;
  padding-bottom: 40px;
  border-top: 5px solid #eee;
}


.nav-justified {
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 5px;
}


.jumbotron {
  text-align: center;
  background-color: transparent;
}
.info{
  position:relative;
 }
.infoStuck{
  position:fixed;
  bottom:0px;
  }
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="container">

        <!-- The justified navigation menu is meant for single line per list item.
	           Multiple lines will require custom code not provided by Bootstrap. -->
        <div class="masthead">
            <h3 class="text-muted">Project name</h3>
            <nav>
                <ul class="nav nav-justified">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Downloads</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>

        <!-- Jumbotron -->
        <div class="jumbotron">
            <h1>Marketing stuff!</h1>
            <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet.</p>
            <p><a class="btn btn-lg btn-success" href="#" role="button">Get started today</a></p>
        </div>

        <!-- Example row of columns -->
        <div class="row">
            <div class="col-lg-4">
                <h2>Safari bug warning!</h2>
                <p class="text-danger">As of v8.0, Safari exhibits a bug in which resizing your browser horizontally causes rendering errors in the justified nav that are cleared upon refreshing.</p>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
            </div>
            <div class="col-lg-4">
                <h2>Heading</h2>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
            </div>
            <div class="col-lg-4">
                <h2>Heading</h2>
                <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
                <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
            </div>
        </div>
        <div class="container">
            <div id="myFormDiv" class="myDiv">
                <button type="button" id="hide" class="close" data-dismiss="myDiv" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <legend>Question?</legend>
                <form action="https://chat.scb.gm/ccp/chat/form/100000" method="post" target="_blank" onsubmit="return window.confirm(&quot;You are submitting information to an external page.\nAre you sure?&quot;);">

                    <span class="box1">Theme</span>
                    <input type="text" name="extensionField_Title" id="box1">
                    <br>
                    <span class="box2">Name</span>
                    <input type="text" name="extensionField_Name" id="box2">
                    <br>
                    <span class="box3">Phone</span>
                    <input type="text" name="extensionField_PhoneNumber" id="box3">
                    <br>
                    <span class="boxinfo">About</span>
                    <select name="extensionField_ccxqueuetag" id="boxinfo">
                        <br>
                        <option value="Chat_Csq23"></option>
                    </select>
                    <br>
                    <input type="submit" value="Continue" id="boxbuton">
                    <input type="hidden" name="author" value="Customer">
                    <br>
                    <input type="hidden" name="title" value="ccx chat">
                    <br>
                    <input type="hidden" name="extensionField_h_widgetName123456" value="Premium">
                    <br>

                    <input type="hidden" name="extensionField_chatLogo" value="">
                    <br>
                    <input type="hidden" name="extensionField_chatWaiting" value="Welcome. Please wait while we connect you to a customer care representative.">
                    <input type="hidden" name="extensionField_chatAgentJoinTimeOut" value="All customer care representatives are busy. Please wait or try again later.">
                    <input type="hidden" name="extensionField_chatError" value="Sorry, the chat service is currently not available. Please try again later.">
                </form>
            </div>
            <input id="info" type="button" onClick="this.style.visibility= 'hidden';" value="Question?" class="switchbuton">
        </div>
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <script type="text/javascript">
            $(function() {
                var button = document.getElementById("info");
                var myDiv = document.getElementById("myDiv");

                function show() {
                    myDiv.style.visibility = "visible";
                }

                function hide() {
                    myDiv.style.visibility = "hidden";
                }

                function toggle() {
                    if (myDiv.style.visibility === "hidden") {
                        show();
                    } else {
                        hide();
                    }
                }
                $("#hide").click(function() {
                    myDiv.style.visibility = "hidden";
                    button.style.visibility = "visible";
                });

                hide();

                button.addEventListener("click", toggle, false);
            });
        </script>

        <!-- Site footer -->
        <footer class="footer">
            <p>&copy; Company 2014</p>
        </footer>
    </div>
</body>

</html>

相关问题
最新问题