Js-内容固定到页面下方固定位置

1：Js-内容固定到页面下方固定位置 并且可以隐藏内容

 

 

 

2：Html脚本

<form action="@Url.Action("ADDMesg")" enctype="multipart/form-data" method="post" id="form1">
    <div id="showJoin"><img src="~/Content/Join/adment/img/ToJoin.png" class="hideJoin" id="joinImg" /></div>  
    <div class="joinInfomationdiv" id="joincontent">                    
        <table class="tableinfo"  id="tableJoin">
            <tr>
                <td><span > </span> </td>
                <td style="width:13%">  <span class="joinDiscriptionname">@Html.Lang("JoiningGreen_0271") </span>   </td>
                <td class="tdnameright"> <span class="ConnectInfo">@Html.Lang("JoiningGreen_0273") </span>   </td>
                <td>                   
                    @Html.TextBoxFor(model => Model.FranchiseeName, new { @class = "lg_input", autocomplete = "off", maxlength = "50" })
                </td>
                <td class="tdnameright"><span class="ConnectInfo">@Html.Lang("JoiningGreen_0274") </span></td>
                <td>
                   
                    @Html.TextBoxFor(model => Model.Contact, new { @class = "lg_input", autocomplete = "off", placeholder = @Html.Lang("JoiningGreen_0280"), maxlength = "40" })
                </td>
                <td class="tdnameright"><span class="ConnectInfo">@Html.Lang("JoiningGreen_0275") </span></td>
                <td>
                    @Html.TextBoxFor(model => Model.HotelAdderssCity, new { @class = "lg_input", autocomplete = "off",  maxlength = "200" })
                </td>
                <td class="tdnameright"><span class="ConnectInfo">@Html.Lang("JoiningGreen_0276") </span></td>
                <td >
                    @Html.TextBoxFor(model => Model.ConstructionArea, new { @class = "lg_input", autocomplete = "off",  maxlength = "10" })
                </td>
                <td></td>                          
                <td style="width:24%" rowspan="2">   <input id="signin_signinBtn" type="button" class="signin_signinBtn" value="@Html.Lang("JoiningGreen_0278")" /></td>
            </tr>
            <tr>
                <td><span class="joinClose"> </span> </td>
                <td><a class="Tel_wireless" title="4006-998-998转6"></a>  <span class="joinTel">@Html.Lang("JoiningGreen_0272") </span>   </td>
                <td class="tdnameright"><span style=" text-align: left">@Html.Lang("JoiningGreen_0277") </span></td>
                <td colspan="5" style=" text-align: left">
                    
                    @Html.TextAreaFor(model => Model.LeaveMessage, new { @class = "JoinMessage", autocomplete = "off", placeholder = @Html.Lang("JoiningGreen_0283"), maxlength = "800" })
                </td>
                <td class="tdnameright">
                    @Html.Lang("JoiningGreen_0285")

                </td>
                <td    >
                    <input type="text" class="lg_input" id="qyzm" maxlength="4" autocomplete="off"  />

                </td>
                <td> <img id="imgCode1" style="height: 39px;width:75px;margin-left:11px;  " title="@Html.Lang("Account_0075")" οnclick="flush('imgCode1');" src="../Account/GetValidateCode">    </td>
                <td>  </td>
               
              
            </tr>

            <tr>

        </table>

    </div>
</form>
 

 

3:js方法

<script type="text/javascript">
    $(document).ready(function(){
    
        //获得页面总高度
     //   var bodyheightcount = $(window).height();
        //获得滚动条距离顶部的距离
        var scrollTopss = $(window).scrollTop();
        var wh = $(document).height();
          
        $(document).scroll(function () {           
            $(".joinInfomationdiv").css("bottom", "0px");
            $(".showJoin").css("bottom", "0px");
        });

        $(".joinClose").click(function ()
        {
                     
            $("#joinImg").removeClass("hideJoin").addClass('showJoin');          
            $("#joincontent").hide();           
        });
        $("#joinImg").click(function () {
            $("#joinImg").removeClass("showJoin").addClass('hideJoin');
            $("#joincontent").show();

        });
       
    });

</script>

4：添加数据内容js方法

<script type="text/javascript">
        function show(obj) {
            var XS = document.getElementById(obj);
            XS.style.display = "block";
        }
        function hide(obj) {
            var YC = document.getElementById(obj);
            YC.style.display = "none";
        }

        $(document).ready(function () {
            $("#signin_signinBtn").click(function () {
                var franName = $("#FranchiseeName").val();
                var tel = $("#Contact").val();
                var qyzm = $.trim($("#qyzm").val());
                if (franName == "" || franName==null) {
                    $("#FranchiseeName").focus();
                    alert("姓名不能为空");
                    return;

                }

                if (tel  ==null &&  tel  =="") {

                    $("#Contact").focus();
                    alert("联系方式不能为空");
                    return;
                }
                if (qyzm == null && qyzm == "") {

                    $("#qyzm").focus();
                    alert("验证码不能为空");
                    return;
                }

 

                $.ajax({
                    type: "POST",
                    url: '@Url.Action("ADDMesg", "Join")',
                    data: {
                        FranchiseeName: $("#FranchiseeName").val(),
                        Contact: $("#Contact").val(),
                        HotelAdderssCity: $("#HotelAdderssCity").val(),
                        ConstructionArea: $("#ConstructionArea").val(),
                        LeaveMessage: $("#LeaveMessage").val(),
                        code: qyzm
                    },
                    success: function (data) {
                        if (data.Successed) {
                            alert(data.msg);
                            var backurl = "JoiningGreen";
                            document.location.href = backurl;
                           
                        } else {
                            $.fn.showAlert(data.msg);
                            flush('imgCode1');
                            return false;
                        }
                    },
                    dataType: "JSON",
                    error: function () {
                        $.fn.showAlert(ServerExceptional_Const);
                        flush('imgCode1');
                    }

                })             
            });
        });

 

    </script>

5：完毕：放在Html页面里面可以查看效果。