Jquery div在点击页脚标记时更改形状和内容

嗨，朋友们，我正在尝试一个实时聊天区，当点击页脚时会进行一些转换。下面是我的基本固定div，但当它点击页脚标记时，它应该显示为与图像相同

。聊天{
位置：固定；
底部：0；
宽度：160px；
高度：40px；
背景：#002855；
右：0px；
}
怀特先生{
颜色：白色；
}

实时网络聊天

$（函数（）{
$（窗口）。滚动（函数（）{
if（$（窗口）.scrollTop（）+$（窗口）.height（）==$（文档）.height（））{
$（'.chat'）.addClass（'rotate'）；
}否则{
$（'.chat'）.removeClass（'rotate'）；
}
});
})

.content{
高度：400px；
宽度：100%；
}
.聊天{
位置：固定；
底部：31px；
宽度：160px；
高度：160px；
背景：#002855；
右：32px；
边界半径：19px；
过渡：全部.25s线性；
}
.chat：悬停、.chat.rotate{
变换：旋转（45度）；
}
怀特先生{
颜色：#fff；
文本对齐：居中；
/*位置：绝对位置；
顶部：47px；
左：21px*/
利润上限：70像素；
过渡：全部.25s线性；
}
.chat:hover.white、.chat.rotate.white{
变换：旋转（-45度）；
}

实时网络聊天

您能发送fiddle吗？希望您至少能自己编写代码。堆栈溢出不是代码编写服务。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果你还有麻烦，请带上您的代码回来，并解释您尝试了什么。谢谢您的回复。您说得对，但当它碰到页脚标记时，输出应该会显示出来。我现在已进行了悬停检查。请使用jquery更改content@muther更新代码段。向下滚动到botom，您可以看到旋转。检查是否正在查找